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

    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>

    效果如下:

    2020国产精品久久久久精品