<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="${ctx}/assets/img/logo.png">
<title>信息</title>
</head>
<body>
<input type="text" name="search_map" id="search_map" value="陝西西安" placeholder="西安">
<button type="button" onclick="codeAddress();">搜索</button>
經/緯度:
<input type="text" name="longitude" id="point_lng" placeholder="">
<input type="text" name="latitude" id="point_lat" placeholder="">
<button type="button" onclick="codeByll();">顯示</button>
<div style="width:518px;height:300px" id="map"></div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3484f488a1ae1fbadaeeacf21ebd52aa"></script>
<script>
/**
*dom 加載完成後，加載 map。
*/
$(document).ready(function(){
codeAddress();//
})
/**
*根據地址名稱，顯示標註。百度 map 定位
*/
function codeAddress(){
var addr= $("#search_map").val();
var marker;
// 百度地圖API功能
var map = new BMap.Map("map");
// 創建地址解析器實例
var myGeo = new BMap.Geocoder();
// 將地址解析結果顯示在地圖上,並調整地圖視野
myGeo.getPoint(addr, function(point){
if (point) {
$("#point_lng").val(point.lng);//經度 x軸
$("#point_lat").val(point.lat);//緯度 y軸
// alert(JSON.stringify(point));
map.centerAndZoom(point, 16);
map.enableScrollWheelZoom(true);//讓地圖支持滾輪縮放。
marker=new BMap.Marker(point);
map.addOverlay(marker);//添加marker
marker.enableDragging(); //可拖拽
marker.addEventListener("dragend", function(e){
$("#point_lng").val(e.point.lng);//經度 x軸
$("#point_lat").val(e.point.lat);//緯度 y軸
});//給地圖添加點擊事件。dragend
}
}, addr);
}
/**
*依據 座標點，顯示標註。
*/
function codeByll(){
var lng= $("#point_lng").val();//經度 x軸
var lat= $("#point_lat").val();
// 百度地圖API功能
var map = new BMap.Map("map");
var point=new BMap.Point(lng,lat);//創建地圖座標點對象。
map.centerAndZoom(point,16);
map.enableScrollWheelZoom(true);
marker=new BMap.Marker(point);
map.addOverlay(marker);
marker.enableDragging(); //可拖拽
marker.addEventListener("dragend", function(e){
$("#point_lng").val(e.point.lng);//經度 x軸
$("#point_lat").val(e.point.lat);//緯度 y軸
});//給地圖添加點擊事件。dragend，click
}
</script>
</body>
</html>百度地圖api 標註小例子
web app 開發：[url=http://developer.baidu.com/map/jsdemo.htm]demo[/url]
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章