百度地圖API介面 地圖標註 地址經緯度解析
先看程式碼：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="
<title>單擊獲取點選的經緯度</title>
</head>
<body>
<div>
城市：
<input type="text" id="city" name="city" value="上海">
地圖級別：
<input type="text" id="zoom" name="zoom" value="15">
<input type="button" id="b1" name="查詢" value="城市查詢" onclick="searchPoint()">（選擇的城市、地圖級別，地圖拉到所關注的區域，點選地圖上某個點，資料顯示在經緯度文字框中）
</div>
<div>
經度：
<input type="text" id="lng" name="lng" >
緯度：
<input type="text" id="lat" name="lat" >
<input type="button" id="b2" name="bz" value="地圖標註" onclick="markPoint()">（輸入經緯度在地圖上顯示）
</div>
<div>
地址：
<input type="text" id="addr" name="addr" size="60">
<input type="button" id="b23" name="bza" value="地址解析" onclick="locationPoint()">
</div>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 建立Map例項
var map = new BMap.Map("allmap");
// 初始化地圖,設定城市和地圖級別。
map.centerAndZoom("上海", 15);
// 啟用滾輪放大縮小，預設禁用
map.enableScrollWheelZoom();
// 啟用地圖慣性拖拽，預設禁用
map.enableContinuousZoom();
// 新增比例尺控制元件
map.addControl(new BMap.ScaleControl());
// 新增縮略地圖控制元件
map.addControl(new BMap.OverviewMapControl());
// 新增預設縮放平移控制元件
map.addControl(new BMap.NavigationControl());
var marker;
map.addEventListener("click", function(e) {
document.getElementById("lng").value = e.point.lng;
document.getElementById("lat").value = e.point.lat;
var locPoint = new BMap.Point(document.getElementById("lng").value, document.getElementById("lat").value);
if (marker)
map.removeOverlay(marker);
marker = new BMap.Marker(locPoint);
map.addOverlay(marker);
alert(e.point.lng + "," + e.point.lat);
map.centerAndZoom(locPoint, 15);
});
function searchPoint() {
var newCity = document.getElementById("city").value;
var newZoom = document.getElementById("zoom").value;
document.getElementById("lng").value = '';
document.getElementById("lat").value = '';
map.centerAndZoom(newCity, newZoom);
}
function markPoint() {
var locPoint = new BMap.Point(document.getElementById("lng").value, document.getElementById("lat").value);
if (marker)
map.removeOverlay(marker);
marker = new BMap.Marker(locPoint);
map.addOverlay(marker);
map.centerAndZoom(locPoint, 14);
}
function locationPoint() {
var myGeo = new BMap.Geocoder();
myGeo.getPoint(document.getElementById("addr").value, function(point){
if(point){
document.getElementById("lng").value = point.lng;
document.getElementById("lat").value = point.lat;
map.centerAndZoom(point, 14);
if (marker)
map.removeOverlay(marker);
marker = new BMap.Marker(point);
map.addOverlay(marker);
}
});
}
</script>
解釋：
1、百度開放平臺線上例項DEMO:http://developer.baidu.com/map/jsdemo.htm#a1_2
2、HEAD部分呼叫JavaScriptAPI處，需要將”ak=“後的內容替換為有效的百度LBS開放平臺金鑰。如ak=123456789
