我們已經準備好了,你呢?

2021我們與您攜手共贏,為您的企業形象保駕護航!

百度地圖標注的實現方法

2020-11-21 0

步驟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>

效果如下:

老子午夜精品无码