步驟1:加載百度地圖js框架
<script src="http://api.map.baidu.com/api?v=1.4"></script>
如果是https請求,js框架地址為:
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=秘鑰&s=1"></script>
秘鑰需要到百度地圖申請,申請地址:http://lbsyun.baidu.com/apiconsole/key
步驟2:寫好地圖容器標簽,html代碼如下
<style> #mapbox{width:99%;height:500px;overflow:hidden;border:1px solid #ccc;} </style> <div id="mapbox"></div>
步驟3:js初始化地圖并標注,坐標點拾取地址:http://api.map.baidu.com/lbsapi/getpoint/index.html
<script> var map = new BMap.Map("mapbox"); // 創建Map實例,必須和地圖容器id一致 var point = new BMap.Point(113.295299,22.722847); // 創建點坐標 map.centerAndZoom(point,16); // 初始化地圖,設置中心點坐標和地圖級別,最大19級 map.enableScrollWheelZoom(); //啟用滾輪放大縮小 map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(42,26), { offset: new BMap.Size(0,0), // 指定定位位置 imageOffset: new BMap.Size(-21,0) // 設置圖片偏移 }); var marker = new BMap.Marker(point,{ icon: myIcon }); map.addOverlay(marker); var infoWinOpts = {} var sitetxt="<div style='text-align:left;color:#333;line-height:25px;'><li>地址:廣東省中山市南頭鎮金灣廣場B座16號 </li><li>電話:0760-22517081</li></div>"; var infoWin = new BMap.InfoWindow(sitetxt,infoWinOpts); marker.openInfoWindow(infoWin); marker.addEventListener("click",function(){this.openInfoWindow(infoWin);});//注冊點擊事件 </script>
效果如下: