Javascript 宣传单:使用手机在地图上获取touchstart或touchmove活动
我正在尝试让touchstart或touchmove事件在带有多边形的传单中工作,在移动设备上,我需要一些非常灵敏的东西,比如pc浏览器中的鼠标向下 这不起作用:Javascript 宣传单:使用手机在地图上获取touchstart或touchmove活动,javascript,android,mobile,leaflet,Javascript,Android,Mobile,Leaflet,我正在尝试让touchstart或touchmove事件在带有多边形的传单中工作,在移动设备上,我需要一些非常灵敏的东西,比如pc浏览器中的鼠标向下 这不起作用: L.Map.mergeOptions({ touchExtend: true }); L.Map.TouchExtend = L.Handler.extend({ initialize: function (map) { this._map = map; this._container = map._con
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');
});
使用上述两种解决方案,不会出现错误,但不会触发手机上的触摸事件
我还试图减少contextmenu延迟,但我没有找到方法
我考虑使用html元素代替传单的多边形,但是
不会这么好的