一、介紹
百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，且支持HTML5特性的地圖開發。
您需先申請密鑰才可使用，請參考：http://lbsyun.baidu.com/apiconsole/key?application=key
參考文檔：http://developer.baidu.com/map/index.php?title=jspopular
第一次寫博客。
二、實現
1、建立地圖
首先在頁面上引用百度的js
1 <script src="http://api.map.baidu.com/api?v=2.0&ak=添你申請的密鑰" type="text/javascript"></script>
在body中添加一個塊
<div id="map"></div>
編寫js代碼，這樣瀏覽頁面后就能看到地圖了，但是地圖不能通過鼠標滑輪進行縮放，
1 var map = new BMap.Map("map");//地圖實例
//如果想要禁用地圖上原有的InfoWindow彈出框：var map = new BMap.Map("map", { enableMapClick: false })
2 var point = new BMap.Point(116.404, 39.915);//創建中心點坐標 3 map.centerAndZoom(point, 15);//設置中心點坐標和地圖級別
2、增加縮放功能
1 setTimeout(function () { 2 map.setZoom(12);//12代表地圖的級別，數字越小，顯示的范圍越大。 3 }, 2000); 4 map.enableScrollWheelZoom(true);
3、使用自定義的方式在地圖上添加坐標點
1 // 編寫自定義函數,創建標注 2 //var marker; 3 function addMarker(point, name) { 4 var label = new BMap.Label(name, { offset: new BMap.Size(20, -10) }); 5 var marker = new BMap.Marker(point, { 6 // 指定Marker的icon屬性為Symbol 7 icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, { 8 scale: 1.5,//圖標縮放大小 9 fillColor: "red",//填充顏色 10 fillOpacity: 0.8//填充透明度 11 }) 12 });//創建標注 13 14 //單擊事件 15 marker.addEventListener("click", function () { 16 var p = marker.getPosition();//獲取坐標的位置 17 alert(p.lng + " " + p.lat); 18 }); 19 map.addOverlay(marker);//將標注添加到地圖上 20 marker.setLabel(label); 21 marker.setTitle(name);
}
4、創建坐標，這里的坐標是寫死的，可以通過獲取數據庫中的數據動態的綁定坐標
1 var points = { "p1": ["116.402544", "39.914714"], "p2": ["116.380697", "39.905859"], "p3": ["116.481307", "39.950786"] }; 2 for (var i in points) { 3 var point = new BMap.Point(points[i][0], points[i][1]); 4 addMarker(point, i); 5 }
5、完整的代碼如下，本人也是第一次接觸。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="http://api.map.baidu.com/api?v=2.0&ak=密鑰" type="text/javascript"></script>
<title>百度地圖</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微軟雅黑";
}
#map {
width: 100%;
height: 500px;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
var map = new BMap.Map("map", { enableMapClick: false });//地圖實例
var point = new BMap.Point(116.404, 39.915);//創建中心點坐標
map.centerAndZoom(point, 15);//設置中心點坐標和地圖級別
setTimeout(function () {
map.setZoom(12);
}, 2000);
map.enableScrollWheelZoom(true);
var points = { "p1": ["116.402544", "39.914714"], "p2": ["116.380697", "39.905859"], "p3": ["116.481307", "39.950786"] };
for (var i in points) {
var point = new BMap.Point(points[i][0], points[i][1]);
addMarker(point, i);
}
// 編寫自定義函數,創建標注
//var marker;
function addMarker(point, name) {
var label = new BMap.Label(name, { offset: new BMap.Size(20, -10) });
var marker = new BMap.Marker(point, {
// 指定Marker的icon屬性為Symbol
icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
scale: 1.5,//圖標縮放大小
fillColor: "red",//填充顏色
fillOpacity: 0.8//填充透明度
})
});//創建標注
//單擊事件
marker.addEventListener("click", function () {
var p = marker.getPosition();
alert(p.lng + " " + p.lat);
});
map.addOverlay(marker);//將標注添加到地圖上
marker.setLabel(label);
marker.setTitle(name);
}
</script>