传单定位控制插件的自定义标记未出现

Question

我为传单定位控件创建了一个自定义标记，并使用此代码插入它

      /*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

有人已经为此插件添加了自定义标记吗？

Answer 1

插件 leaflet 定位控件 在方法 onLocationFound 上使用

locationfound

事件来在地理定位成功时检索触发的位置。

因此，如果您选中

onLocationFound

，事件数据将存储在

this._event

中，而 latlng 信息 则存储在

this._event.latlng

中。

您必须使用

this._event.latLng

定义自定义标记：

 var startMarker = L.marker(this._event.latlng, {
      icon: L.icon(icongpsMarker),
 });
 startMarker.addTo(map);

我准备了一个完整的演示：https://stackblitz.com/edit/js-t6dnt8?file=index.js