Leaflet Locate Control插件自定义标记不显示，报错e未定义求助

我给Leaflet Locate Control插件做了自定义定位标记，代码如下：

/*button to turn on GPS*/
//function from leaflet locate control (plugin)
L.Control.locategpsmarker = L.Control.Locate.extend({
    
    _drawMarker: function () {

        var icongpsMarker = {
            iconUrl: 'img2/gps_marker.png',
            iconAnchor: [18, 18]};

        var startMarker = L.marker(e.latlng, { icon: L.icon(icongpsMarker) });
        startMarker.addTo(mymap);
    }     

});

/*add geolocation button to map*/
var lc = new L.Control.locategpsmarker({
    initialZoomLevel: 13,
    locateOptions: { enableHighAccuracy: true }, 
    position: 'topright',
    drawCircle: false,
    showPopup: false,
});
mymap.addControl(lc);
/*END GEOLOCATION BUTTON*/

但运行后出现如下错误：

Uncaught ReferenceError: e is not defined
    at i._drawMarker (main.html:119:44)
    at i._onLocationFound (L.Control.Locate.js:772:12)
    at i.fire (Events.js:190:11)
    at i._handleGeolocationResponse (Map.js:729:8)
_drawMarker @ main.html:119
_onLocationFound @ L.Control.Locate.js:772
fire @ Events.js:190
_handleGeolocationResponse @ Map.js:729

请问有没有人成功给这个插件加过自定义标记？

问题分析与修复 #

报错的核心原因是你重写的_drawMarker方法没有接收事件参数，原插件调用这个方法时会传入包含定位坐标的事件对象，你没声明e参数自然会报错。另外直接创建新标记还会导致多次定位后地图上出现重复标记，建议复用插件自带的标记实例。

修复后的代码：

/*button to turn on GPS*/
//function from leaflet locate control (plugin)
L.Control.locategpsmarker = L.Control.Locate.extend({
    _drawMarker: function (e) { // 添加上事件参数e
        var icongpsMarker = {
            iconUrl: 'img2/gps_marker.png',
            iconAnchor: [18, 18]
        };
        // 复用插件内部的_marker实例，避免重复创建
        if (!this._marker) {
            this._marker = L.marker(e.latlng, { icon: L.icon(icongpsMarker) });
            this._marker.addTo(this._map); // 用插件内置的_map，不用全局mymap更稳妥
        } else {
            this._marker.setLatLng(e.latlng); // 定位更新时只修改坐标
        }
    }
});

/*add geolocation button to map*/
var lc = new L.Control.locategpsmarker({
    initialZoomLevel: 13,
    locateOptions: { enableHighAccuracy: true }, 
    position: 'topright',
    drawCircle: false,
    showPopup: false,
});
mymap.addControl(lc);
/*END GEOLOCATION BUTTON*/

更简单的实现方式 #

其实不用重写_drawMarker方法，直接用插件自带的markerStyle配置项就能自定义标记，代码更简洁：

var lc = new L.Control.Locate({
    initialZoomLevel: 13,
    locateOptions: { enableHighAccuracy: true }, 
    position: 'topright',
    drawCircle: false,
    showPopup: false,
    // 直接配置自定义图标
    markerStyle: {
        icon: L.icon({
            iconUrl: 'img2/gps_marker.png',
            iconAnchor: [18, 18]
        })
    }
});
mymap.addControl(lc);

内容的提问来源于stack exchange，提问作者astaga