步骤：①定义构造函数并继承Overlay，通过构造函数参数可以传递一些自由的变量。设置自定义覆盖物对象的prototype属性为Overlay的实例，以便继承覆盖物基类。
functionComplexCustomOverlay(point, item){this._point =point;this._text =item.name;this._child =item.idthis._number=item.number
}
ComplexCustomOverlay.prototype= new BMap.Overlay();
②初始化自定义覆盖物
ComplexCustomOverlay.prototype.initialize = function(map){var that=thisthat._map=map;
let div= that._div = document.createElement("div");//div.style.zIndex = BMap.Overlay.getZIndex(that._point.lat);
div.setAttribute('data-id', that._child);
div.setAttribute('class', 'map-circle');
div.setAttribute('data-lng', that._point.lng);
div.setAttribute('data-lat', that._point.lat);
let pname= document.createElement("p");
pname.setAttribute('class', 'map-areaname');
pname.appendChild(document.createTextNode(that._text));
div.appendChild(pname);
let pnum= document.createElement("p");
pnum.setAttribute('class', 'map-areanumber');
div.appendChild(pnum);
pnum.appendChild(document.createTextNode(`${that._number}个`));//div.onmouseover = function(){
//this.style.zIndex = 9999;
//}
//div.onmouseout = function(){
//this.style.zIndex = BMap.Overlay.getZIndex(that._point.lat);
//}
if(that._number==0){
let tipspan= document.createElement("span");
tipspan.setAttribute('class', 'map-nodatatips');
tipspan.appendChild(document.createTextNode("暂无数据"));
div.appendChild(tipspan);
let itips= document.createElement("i");
itips.setAttribute('class', 'map-itips');
tipspan.appendChild(itips);
}
div.οnclick=function(){if(that._number==0){return;
}
let curlng=parseInt(div.getAttribute('data-lng'))
let curlat=parseInt(div.getAttribute('data-lat'))
map.clearOverlays();//let point1 = new BMap.Point(curlng,curlat);
let point1 = new BMap.Point("123","42");
map.enableScrollWheelZoom();
map.centerAndZoom(point1,9);
let districtData=[
{"lng":123.848569,"lat":42.302504,"name":'西大标准件大全批发商店'},
{"lng":124.848569,"lat":42.302504,"name":'测试地点111'},
{"lng":122.28569,"lat":42.22504,"name":'测试地点222'},
{"lng":122.29569,"lat":42.3504,"name":'测试地点333'}
]for (let i = 0; i < districtData.length; i++) {
let temp2=districtData[i]
let myCompOverlay2= new ComplexCustomOverlay2(newBMap.Point(temp2.lng,temp2.lat), temp2);
map.addOverlay(myCompOverlay2);
}
}
map.getPanes().labelPane.appendChild(div);returndiv;
}
注：自定义覆盖物createElement 创建的DOM元素，添加了属性类名，故css对应需要添加相应的样式。
③绘制覆盖物
需要在draw方法中设置覆盖物的位置，通过map.pointToOverlayPixel方法可以将地理坐标转换到覆盖物的所需要的像素坐标。
ComplexCustomOverlay.prototype.draw = function(){var map = this._map;var pixel = map.pointToOverlayPixel(this._point);this._div.style.left = pixel.x + "px";this._div.style.top = pixel.y + "px";
}
④移除覆盖物
当调用map.removeOverlay或者map.clearOverlays方法时，API会自动将initialize方法返回的DOM元素进行移除。
⑤添加覆盖物
functioninitMap(){
let proviceData=[
{"lng":116.405289,"lat":39.904987,"name":"北京","id":1,"number":123},
{"lng":121.472641,"lat":31.231707,"name":"上海","id":21,"number":0},
{"lng":117.190186,"lat":39.125595,"name":"天津","id":42,"number":0},
{"lng":106.504959,"lat":29.533155,"name":"重庆","id":62,"number":223},
{"lng":117.283043,"lat":31.861191,"name":"安徽","id":104,"number":223},
{"lng":119.306236,"lat":26.075302,"name":"福建","id":227,"number":243},
{"lng":103.823555,"lat":36.058041,"name":"甘肃","id":322,"number":87},
{"lng":113.28064,"lat":23.125177, "name":"广东","id":423,"number":1},
{"lng":108.320007,"lat":22.82402,"name":"广西","id":566,"number":86},
{"lng":106.713478,"lat":26.578342,"name":"贵州","id":690,"number":90},
{"lng":106.884789,"lat":39.441528,"name":"海南","id":788,"number":45},
{"lng":117.69,"lat":39.156631,"name":"河北","id":814,"number":67},
{"lng":113.665413,"lat":34.757977,"name":"河南","id":998,"number":0},
{"lng":126.642464,"lat":45.756966,"name":"黑龙江","id":1176,"number":12},
{"lng":114.298569,"lat":30.584354,"name":"湖北","id":1320,"number":87},
{"lng":112.982277,"lat":28.19409,"name":"湖南","id":1436,"number":90},
{"lng":125.324501,"lat":43.886841,"name":"吉林","id":1573,"number":0},
{"lng":118.76741,"lat":32.041546,"name":"江苏","id":1643,"number":2},
{"lng":115.892151,"lat":28.676493,"name":"江西","id":1763,"number":0},
{"lng":123.429092,"lat":41.796768,"name":"辽宁","id":1874,"number":23},
{"lng":111.670799,"lat":40.81831,"name":"内蒙古","id":1989,"number":23},
{"lng":106.278175,"lat":38.46637,"name":"宁夏","id":2103,"number":7},
{"lng":101.778915,"lat":36.623177,"name":"青海","id":2130,"number":0},
{"lng":117.000923,"lat":36.675808,"name":"山东","id":2182,"number":823},
{"lng":112.549248,"lat":37.857014,"name":"山西","id":2340,"number":22},
{"lng":108.948021,"lat":34.263161,"name":"陕西","id":2471,"number":0},
{"lng":104.065735,"lat":30.659462,"name":"四川","id":2589,"number":100},
{"lng":91.13221,"lat":29.66036,"name":"西藏","id":2792,"number":22},
{"lng":87.617729,"lat":43.792816,"name":"新疆","id":2873,"number":0},
{"lng":102.71225,"lat":25.040609,"name":"云南","id":2987,"number":44},
{"lng":120.15358,"lat":30.287458,"name":"浙江","id":3133,"number":98},
{"lng":114.173355,"lat":22.37,"name":"香港","id":3235,"number":0},
{"lng":113.549088,"lat":22.198952,"name":"澳门","id":3239,"number":98},
{"lng":121.509064,"lat":25.044333,"name":"台湾","id":3242,"number":34}
]for (let i = 0; i < proviceData.length; i++) {
let temp=proviceData[i]
let myCompOverlay= new ComplexCustomOverlay(newBMap.Point(temp.lng,temp.lat),temp);
map.addOverlay(myCompOverlay);
}
}
initMap()
效果图
喔喔，是不是显得很高大上，然后又觉得实现起来很easy的感觉有木有。
开发参考文档：
附：根据地理位置获取经纬度
var longtitude = 0;
var latitude = 0;
function GetPostion() {
//通过百度获取经纬度
var address = "上海市徐家汇";
var url = "https://api./geocoder/v2/?address=" + address + "&output=json&ak=FG7wxr1VUj0k2NwoO3yXzymd&callback=?";
$.getJSON(url, function (data) {
longtitude = data.result.location.lng;
latitude = data.result.location.lat;
console.log(longtitude,latitude)
});
}
GetPostion()
