三分鐘學會調用百度地圖API

1.首先你要在百度地圖的官網註冊成爲開發者
並創建自己的應用,獲取ak,這裏如果在web網頁中,我選擇用js
在這裏插入圖片描述

2.然後在本地編寫調用的html文件

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
    </style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=P39PpXRcSvYIugAGG4HKCiB3GVNncaKA"></script> 

    <title>添加多個行政區劃</title>
</head>
<body>
    <div id="allmap"></div>
</body>

<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(114.522081844,38.0489583146), 15);
    // 初始化地圖,設置中心點座標和地圖級別,縮放
    map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
    map.enableScrollWheelZoom();
    madeBoundary();
    

//區域圖
    function madeBoundary() {       
    var datas = new Array("新華區-#665599","石家莊市長安區-#1199cc","裕華區-#559955","橋西區-#666ddd");
        var bdary = new BMap.Boundary();
        for(var i=0;i<datas.length;i++){
        getBoundary(datas[i],bdary);    
        } 
        
    } 
//設置區域圖

    function getBoundary(data,bdary){    
      data = data.split("-");
        bdary.get(data[0], function(rs){       //獲取行政區域    
            var count = rs.boundaries.length; //行政區域的點有多少個

              var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"
            }
                ); //建立多邊形覆蓋物      
                map.addOverlay(ply);  //添加覆蓋物
                map.setViewport(points);    //調整視野
            }                             
        });     
    }
        var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map}
    });
    local.search("充電樁");

</script>

</html>

3.在瀏覽器瀏覽,ok!

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章