1. 程式人生 > >【百度地圖】在百度地圖上框出邊界線

【百度地圖】在百度地圖上框出邊界線

程式碼:

一、建立地圖

建立地圖物件;設立中心點以及地圖級別。

 var map = new BMap.Map("container");
 map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 12);

二、新增地圖事件

地圖事件:添加了滾輪縮放。

map.enableScrollWheelZoom(true)

三、獲取行政區域

建構函式Boundary;

get方法,獲取行政區域的邊界。

rs是獲取到的結果。

獲取到邊界的點陣列後,新增一個多邊形覆蓋物。

points為一系列點的陣列,系統自動展示points裡所有點。

function getBoundary(){       
    var bdary = new BMap.Boundary();
    var name = document.getElementById("districtName").value;//江西省,輸入省、直轄市或縣名稱即可
    bdary.get(name, function(rs){       //獲取行政區域
        map.clearOverlays();        //清除地圖覆蓋物       
        var count = rs.boundaries.length; //行政區域的點有多少個
        for(var i = 0; i < count; i++){
            var ply = new BMap.Polygon(rs.boundaries[i], 
                      {strokeWeight: 2, //設定多邊形邊線線粗
                       strokeOpacity: 1, //設定多邊形邊線透明度0-1
                       StrokeStyle: "solid", //設定多邊形邊線樣式為實線或虛線,取值 solid 或 dashed
                       strokeColor: "#ff0000", //設定多邊形邊線顏色
                       fillColor: "#00ffff", //設定多邊形填充顏色
                       fillOpacity:0.01 //設定多邊形填充顏色透明度0-1  注:標紅的地放你們可以去掉看一下效果,自己體驗一下
                  }); //建立多邊形覆蓋物
            map.addOverlay(ply);  //新增覆蓋物
            map.setViewport(ply.getPath());    //調整視野

圖片效果圖: