Question

在移动设备上，我试图让touchstart或touchmove事件在带有多边形的传单中正常工作，我需要诸如PC浏览器中的mousedown之类的响应速度很快的东西。

这不起作用：

L.Map.mergeOptions({
  touchExtend: true
});

L.Map.TouchExtend = L.Handler.extend({

  initialize: function (map) {
    this._map = map;
    this._container = map._container;
    this._pane = map._panes.overlayPane;
  },

  addHooks: function () {
    L.DomEvent.on(this._container, 'touchstart', this._onTouchStart, this);
    L.DomEvent.on(this._container, 'touchend', this._onTouchEnd, this);
  },

  removeHooks: function () {
    L.DomEvent.off(this._container, 'touchstart', this._onTouchStart);
    L.DomEvent.off(this._container, 'touchend', this._onTouchEnd);
  },

  _onTouchStart: function (e) {
    if (!this._map._loaded) { return; }

    var type = 'touchstart';

    var containerPoint = this._map.mouseEventToContainerPoint(e),
        layerPoint = this._map.containerPointToLayerPoint(containerPoint),
        latlng = this._map.layerPointToLatLng(layerPoint);

    this._map.fire(type, {
      latlng: latlng,
      layerPoint: layerPoint,
      containerPoint: containerPoint,
      originalEvent: e
    });
  },

  _onTouchEnd: function (e) {
    if (!this._map._loaded) { return; }

    var type = 'touchend';

    this._map.fire(type, {
      originalEvent: e
    });
  }
});
L.Map.addInitHook('addHandler', 'touchExtend', L.Map.TouchExtend);

而这两者都不是：

L.Map.mergeOptions({
    touchExtend: true
});

L.Map.TouchExtend = L.Handler.extend({
    initialize: function (map) {
        this._map = map;
        this._container = map._container;
        this._pane = map._panes.overlayPane;
    },

    addHooks: function () {
        L.DomEvent.on(this._container, 'touchstart', this._onTouchStart, this);
    },

    removeHooks: function () {
        L.DomEvent.off(this._container, 'touchstart', this._onTouchStart);
    },

    _onTouchStart: function (e) {
        if (!this._map._loaded) { return; }

        var type = 'touchstart';

        var containerPoint = this._map.mouseEventToContainerPoint(e),
            layerPoint = this._map.containerPointToLayerPoint(containerPoint),
            latlng = this._map.layerPointToLatLng(layerPoint);

        this._map.fire(type, {
            latlng: latlng,
            layerPoint: layerPoint,
            containerPoint: containerPoint,
            originalEvent: e
        });

    }
});

L.Map.addInitHook('addHandler', 'touchExtend', L.Map.TouchExtend);



var map = L.map('map', { zoomControl:false }).setView([50.594412, 5.863625], 15);

    L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {
    maxZoom: 22, minZoom: 5, zoomControl:false , 
    id: 'mapbox.streets' 

    }).addTo(map);   

 map.on('touchstart', function() {
        alert('touchmove');
    });

使用上述2种解决方案，没有错误，但是只是不触发移动设备上的触摸事件...

我也试图减少上下文菜单的延迟，但是我没有找到方法。

我考虑使用由传单的多边形代替的html元素，但是不会那么好

传单：使用手机在地图上获取touchstart或touchmove事件

0 个答案: