前几天公司有个需求,利用百度地图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图片。
复制代码
就是这些啦,感谢阅读,希望为您带来帮助!