vue

1、定义构造函数并继承Overlay
首先您需要定义自定义覆盖物的构造函数，通过构造函数参数可以传递一些自由的变量。设置自定义覆盖物对象的prototype属性为Overlay的实例，以便继承覆盖物基类。

// 定义自定义覆盖物的构造函数  
function SquareOverlay(center, length, color){
    this._center = center;
    his._length = length;
    this._color = color;
}
// 继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
2、初始化自定义覆盖物

实现initialize方法，当调用map.addOverlay方法时，API会调用此方法。
当调用map.addOverlay方法添加自定义覆盖物时，API会调用该对象的initialize方法用来初始化覆盖物，在初始化过程中需要创建覆盖物所需要的DOM元素，并添加到地图相应的容器中。这里我们选择添加在容器markerPane上。

// 实现初始化方法  
SquareOverlay.prototype.initialize = function(map){
    // 保存map对象实例
    his._map = map;
    // 创建div元素，作为自定义覆盖物的容器
    var div = document.createElement("div");
    div.style.position = "absolute";
    // 可以根据参数设置元素外观
    div.style.width = this._length + "px";
    div.style.height = this._length + "px";
    div.style.background = this._color;
    // 将div添加到覆盖物容器中
    map.getPanes().markerPane.appendChild(div);
    // 保存div实例
    this._div = div;
    // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
    // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
    return div;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
3、绘制覆盖物

实现draw方法。
到目前为止，我们仅仅把覆盖物添加到了地图上，但是并没有将它放置在正确的位置上。
您需要在draw方法中设置覆盖物的位置，每当地图状态发生变化（比如：位置移动、级别变化）时，API都会调用覆盖物的draw方法，用于重新计算覆盖物的位置。
通过map.pointToOverlayPixel方法可以将地理坐标转换到覆盖物的所需要的像素坐标。

// 实现绘制方法   
SquareOverlay.prototype.draw = function(){    
// 根据地理坐标转换为像素坐标，并设置给容器    
   var position = this._map.pointToOverlayPixel(this._center);    
   this._div.style.left = position.x - this._length / 2 + "px";    
   this._div.style.top = position.y - this._length / 2 + "px";    
}
1
2
3
4
5
6
7
1
2
3
4
5
6
7
4、移除覆盖物
当调用map.removeOverlay或者map.clearOverlays方法时，API会自动将initialize方法返回的DOM元素进行移除。

map.removeOverlay();

1
2
1
2
5、添加覆盖物
您现在已经完成了一个完整的自定义覆盖物的编写，可以添加到地图上了。

// 初始化地图  
var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
// 添加自定义覆盖物   
var mySquare = new SquareOverlay(map.getCenter(), 100, "red");    
map.addOverlay(mySquare);
1
2
3
4
5
6
7
1
2
3
4
5
6
7
如何给地图添加自定义定位控件并更换控件的图标；

给地图添加自定义控件，需要用到控件类：ZoomControl，使用方法如下：

addControlLocation(){
    var that = this;
    // 定义一个控件类，即function    
    function ZoomControl(){    
        // 设置默认停靠位置和偏移量  
        this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;    
        this.defaultOffset = new BMap.Size(20, 50);    
    }    
    // 通过JavaScript的prototype属性继承于BMap.Control   
    ZoomControl.prototype = new BMap.Control();
    ZoomControl.prototype.initialize = function(map){    
        // 创建一个DOM元素   
        var img = document.createElement("img");    
        img.setAttribute('src',that.locationImg)
        // 设置样式    
        img.style.cursor = "pointer";
        // 绑定事件，获取当前城市    
        img.onclick = function(e){...   }    
        // 添加DOM元素到地图中   
        map.getContainer().appendChild(img);    
        // 将DOM元素返回  
        return img;    
    }
    // 创建控件实例    
    var myZoomCtrl = new ZoomControl();    
    // 添加到地图当中    
    this.mp.addControl(myZoomCtrl);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
在地图初始化完成后，调用addControlLocation()方法即可；

添加自定义 当前位置定位标注
如图：

需要用到new BMap.Marker();设置图标大小用 myIcon.setImageSize();

addCurrentMarker(){ // 添加自定义 当前位置定位标注
           var myIcon = new BMap.Icon(this.redLocation,{
               offset: new BMap.Size(10, 25), // 指定定位位置
               imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
           });
           // myIcon.setStyle({width: '.666rem', height: '.666rem'});
           myIcon.setImageSize(new BMap.Size(60,60)); // 设置 图标大小
           let point = new BMap.Point(this.currentPoint.lng,this.currentPoint.lat);  //  标注的中心点，应该是始终是用户当前位置
           let marker = new BMap.Marker(point,{icon:myIcon});  // 创建Marker标注
           this.mp.addOverlay(marker);  // 添加当前定位点
       },
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
几个常用的api(地图缩放，拖拽，获取当前位置)等功能的实现；
地图表面触发点击事件：
this.mp.addEventListener("touchstart", () => {}）；
1
1
地图缩放事件：
this.mp.addEventListener("zoomend", () => {}）；
1
1
地图拖拽事件：
this.mp.addEventListener("dragstart",()=>{}）；
this.mp.addEventListener("dragend",()=>{}）；
1
2
1
2
获取用户当前位置(经纬度对象)：
export function getLocationData(fn) {
    let geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            fn(r.point);
        }
    });
}