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

                              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>

                              效果如下:

                              2019日韩中文字幕_免费观看性生交大片_香港三日本三级三级三级_久久性色综合88_久久国产精品免费网站_99玖玖免费视频