利用百度地圖api造輪子

前幾天公司有個需求，利用百度地圖api顯示出所給地址的圖釘和地址，後面又加上須要顯示出鄉鎮的邊界線，然而查了一下只能顯示到縣級，若是有大佬知道如何顯示到縣級如下，還望指教~第一次寫文章，有問題歡迎討論~輕拍~

百度地圖api地址：百度地圖api-demo

下面是代碼:

html部分:

<div id="l-map"></div>
複製代碼

css部分:

body, html{
    width: 100%;
    height: 100%;
    margin:0;
    font-family:"微軟雅黑";
}
#l-map{
    height:100%;
    width:100%;
}
複製代碼

上面的html和css都是api裏面直接粘的。。

js部分

//初始化地圖
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.226251,40.066117), 13);
map.enableScrollWheelZoom(true);

//獲取地址
var myGeo = new BMap.Geocoder();
var darkblueadds = [
	"溫泉鎮白家疃村",
	"溫泉鎮溫泉村"
]
var lightblueadds = [
	"四季青鎮田村",
	"四季青鎮西山村",
	"東昇鎮清河村",
	"東昇鎮馬坊村",
	"西北旺鎮屯佃村",
	"西北旺鎮永豐",
	"西北旺鎮亮甲店",
	"蘇家坨鎮蘇三四村",	
	"蘇家坨鎮後沙澗村",
	"蘇家坨鎮西埠頭村",
	"蘇家坨鎮七王墳村"
]
var yellowadds = [
	"海淀鎮萬泉莊村",
	"海淀鎮六郎莊村",
	"海淀鎮樹村",
	"海淀鎮青龍橋村"
];
// 圖標替換
var lightblue = new BMap.Icon("1.png", new BMap.Size(28,36));//淺藍色圖釘
var orange = new BMap.Icon("2.png", new BMap.Size(26,39));//橙色圖釘
var purple = new BMap.Icon("3.png", new BMap.Size(28,36));//紫色圖釘


$(function(){
	Search(0,yellowadds,orange);
	Search(0,lightblueadds,lightblue);
	Search(0,darkblueadds,purple);
	reviewAdds();
	getBoundary();
})

// 地址座標重複，手動修正
var str1 = ["南安河村",116.134126,40.053856];
var str2 = ["北莊子村",116.18143,40.102529];
var str3 = ["西小營村",116.160379,40.080445];
var str = [str1,str2,str3];
var addstr=[];
function reviewAdds(){		
	// 修正後調用顯示方法
	for(let j=0; j<3; j++){
		addstr[j] = new BMap.Point(str[j][1],str[j][2]);
		if(j<2){
			addMarker(addstr[j],new BMap.Label(str[j][0],{offset:new BMap.Size(20,-10)}),orange);
		}
		else{
			addMarker(addstr[j],new BMap.Label(str[j][0],{offset:new BMap.Size(20,-10)}),purple);
		}
	}
}

//獲取輪廓線
function getBoundary(){       
    var bdary = new BMap.Boundary();
    bdary.get("北京市海淀區", function(rs){       //獲取行政區域
        //map.clearOverlays(); //清除地圖覆蓋物 
        var count = rs.boundaries.length; //行政區域的點有多少個
        if (count === 0) {
		      alert('未能獲取當前輸入行政區域');
		      return;
	    }
        for(var i = 0; i < count; i++){
            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 3, strokeColor: "#001026",fillColor:""}); //創建多邊形覆蓋物
            map.addOverlay(ply);  //添加覆蓋物
            //map.setViewport(ply.getPath()); //調整視野 
        }                
    });   
}

//獲取地址
//參數說明：i爲地址數組index，adds爲傳入地址數組，iconname爲不一樣地址顯示不一樣圖釘傳入參數
function Search(i,adds,iconname){
	myGeo.getPoint(adds[i], function(point){
		if (point) {
			var mypoint = new BMap.Point(point.lng, point.lat);
			var add = adds[i].split("鎮"); //從「鎮」分割字符串
			addMarker(mypoint,new BMap.Label(add[1],{offset:new BMap.Size(20,-10)}),iconname);
			if( i < adds.length-1){
				Search(i+1,adds,iconname);
			}
			else{
				console.info("end");
			}
		}
		else{
			alert("error");
		}
	}, "北京市");
}

// 編寫自定義函數,建立標註
function addMarker(point,label,iconname){
	var marker = new BMap.Marker(point,{icon:iconname});
	map.addOverlay(marker);
	marker.setLabel(label);
}
複製代碼

當調用將地址轉換爲座標的方法 BMap.Point 以後，console出來地址座標，發現其中有重複項，
只能手動在百度地圖裏從新搜索座標再粘過來，目前沒有發現其餘解決辦法。
另外在地址的數組裏有鎮的名字是爲了提升搜索精度，而需求中須要顯示去掉鎮名，
因此對數組進行了分割，其餘就是不一樣地址用了不一樣顏色的圖釘顯示，
圖釘的圖標須要本身製做成png圖片。
複製代碼

就是這些啦，感謝閱讀，但願爲您帶來幫助！