先来看效果图 效果图 一 前置知识 官方Overlay-覆盖物的抽象基类 方法 返回值 描述 initialize(map: Map) HTMLElement 抽象方法，用于初始化覆盖物，当调用map.addOverlay时，API将调用此方法。自定义覆盖物时需要实现此方法。自定义覆盖物时需要将覆盖物对应的HTML元素返回 isVisible() Boolean 判断覆盖物是否可见 draw() none 抽象方法，当地图状态发生变化时，由系统调用对覆盖物进行绘制。自定义覆盖物需要实现此方法 show() none 显示覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为空 hide() none 隐藏覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为none 重点方法讲解 initialize(map: Map) 初始化覆盖物，当调用map.addOverlay(--)，会自动调用，自定义Overlay在此处可以定义呈现在地图上的HTML元素 draw() 当地图发生变化，会自动调用此方法，进行覆盖物的重绘工作 map.pointToOverlayPixel(point); 将经纬度坐标转换成屏幕的像素坐标，此像素坐标就是ECharts图形渲染在地图中的位置 自定义实现，需要实现对 initialize 和draw 方法进行实现，达到自定义Overlay的目的 MapPanes 此类表示地图上所有覆盖物的容器集合，没有构造函数，通过对象字面量形式表示。通过Map的getPanes方法可获得该对象实例。通过 map.getPanes().labelPane.appendChild(div); 将自定义的div添加到覆盖物列表 二 实现 新建complexCustomOverlay.js文件，废话少说，直接代码 !function(baiduMap) { /** * 自定义覆盖物类, 取名 ComplexCustomOverlay 使用时直接 new ComplexCustomOverlay 即可 * 示例 new ComplexCustomOverlay(121.620483, 31.291102, function(div_obj){}); * @param {*} lng 经度 * @param {*} lat 维度 * @param {*} callback 回调方法 */ ComplexCustomOverlay = function(lng, lat, callback) { this._point = new baiduMap.Point(lng, lat); this._callback = callback; }; //继承Overlay基类 ComplexCustomOverlay.prototype = new baiduMap.Overlay(); /** * 实现initialize方法，此方法在map.addOverlay(--)时会自动调用，完成初始化工作 */ ComplexCustomOverlay.prototype.initialize = function(map) { this._map = map; //生成div,用来承载ECharts var div = this._div = document.createElement("div"); // 可以根据情况添加些样式信息 // div.style.backgroundColor = "#fff"; div.style.zIndex = baiduMap.Overlay.getZIndex(this._point.lat); div.style.width = "100px"; div.style.height = "100px"; // marginLeft marginTop 的设置可以让这个div的中心点和给定的经纬度重合 div.style.marginLeft = '-50px'; div.style.marginTop = '-50px'; //必须是绝对定位，不然会偏离原来位置 div.style.position='absolute'; //将该覆盖物添加到标签覆盖物列表 map.getPanes().labelPane.appendChild(div); //调用传入的回调方法 this._callback(div); return div; }; /** * 当地图发生变化，会自动调用此方法，进行覆盖物的重绘工作 * 例如 拖动地图、地图放大缩小等操作，都会自动调用draw方法进行重绘 */ ComplexCustomOverlay.prototype.draw = function(){ //饼图的位置设置,需要获取该地图点的像素位置x,y var pixel = this._map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x + "px"; this._div.style.top = (pixel.y - 30) + "px"; } }(BMap); // 将BMap作为参数传入 调用 https://www.cnblogs.com/itgiser/p/11463352.html