Leaflet轻触标记以显示弹出窗口不适用于移动设备上的AngularJS / ui-leaflet

Question

这是一个特定的小册子/AngularJS问题，我希望有人能帮助我。

我在AngularJS应用程序中使用Leaflet (0.7.7)和ui-leaflet(1.0.0)指令。angular-ui/ui-leaflet

除了点击地图上的标记在移动设备上显示弹出窗口之外，一切都很好(在台式机上，一切都很好！)click事件永远不会被激发。与移动设备上的点击事件不同，touchstart和touchend事件是在“点击”标记时触发的。在touchend事件之后执行的_onUp方法中，有一小段代码片段，它应该在点击的目标上执行一个模拟的单击事件。

// simulate click if the touch didn't move too much
if (this._isTapValid()) {
    this._simulateEvent('click', first);
}

我包含了一些调试消息，我的应用程序在点击标记后执行_simulateEvent()方法。_simulateEvent()方法只是在点击的目标上调度一个单击事件：

var simulatedEvent = document.createEvent('MouseEvents');

   simulatedEvent._simulated = true;
   e.target._simulatedClick = true;

    simulatedEvent.initMouseEvent(
         type, true, true, window, 1,
         e.screenX, e.screenY,
         e.clientX, e.clientY,
         false, false, false, false, 0, null);

     e.target.dispatchEvent(simulatedEvent);

但之后就什么都没发生了。弹出窗口不会出现。当我更改_simulateEvent()方法并“强制”单击目标时，一切正常。

e.target.click();

轻触标记即可打开弹出窗口。

有没有人可以帮助我或者解释为什么官方的实现对我不起作用？

编辑:我将标记添加到地图的代码片段。我有一系列的城市。对于每个城市，我都会在标记中添加一个标记。

addMarker(city) {
    this.markers[city.id] = {
        lat: city.coordinates.latitude,
        lng: city.coordinates.longitude,
        clickable: true,
        dragable: false,
        focus: false,
        message: markerTemplate,
        getMessageScope: _ => {
            let $childScope = this.$scope.$new();

            this.cities.map((_city) => {
                if (_city.id == city.id) {
                    $childScope.city = _city;
                }
            });

            $childScope.switchToCity = () => {
                this.switchToCity(city.id);
            };

            return $childScope;
        },
        icon: {
            iconUrl:'/images/pin_home.png',
            iconSize: [40, 46],
            iconAnchor: [20, 46]
        },
        label: {
            message: city.name,
            options: {
                noHide: true
            }
        }
    };
}

markerTemplate是一个AngularMaterial md-card指令，其中包含一些关于城市的信息。Angular Material md-card

然后将标记数组传递给leaflet drective：

<leaflet width="100%" height="100%" defaults="vm.mapOptions" maxbounds="vm.maxBounds" markers="vm.markers" lf-center="vm.center" id="world_map"></leaflet>

其中vm是我的控制器。

Answer 1

在leaflet指令中使用视口高度和视口宽度，而不是百分比。

<leaflet width="100vw" height="100vh" defaults="vm.mapOptions" maxbounds="vm.maxBounds" markers="vm.markers" lf-center="vm.center" id="world_map"></leaflet>

还要确保你打开了容器上的水龙头

<ion-content data-tap-disabled="true">