利用百度地图api造轮子-CSDN博客

前几天公司有个需求，利用百度地图api显示出所给地址的图钉和地址，后面又加上需要显示出乡镇的边界线，然而查了一下只能显示到县级，如果有大佬知道如何显示到县级以下，还望指教~第一次写文章，有问题欢迎讨论~轻拍~

下面是代码:

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图片。
复制代码

就是这些啦，感谢阅读，希望为您带来帮助！