Question

这是一个特定的Leaflet / AngularJS问题，我希望有人可以帮助我。

我使用带有ui-leaflet（1.0.0）指令的AngularJS应用程序中的Leaflet（0.7.7）。 angular-ui/ui-leaflet

一切正常，除了点击地图上的标记以显示移动设备上的弹出窗口（在桌面上一切正常！）。 click事件永远不会被触发。而不是在移动设备上的点击事件，触摸启动和触发事件在标记“点击”时被触发。在touchend事件之后执行的_onUp方法中，有一个小片段应该在点击的目标上执行模拟点击事件。

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

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

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);

但是没有别的事情发生。 Popup不会出现。当我更改_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

然后我将markers数组传递给传单：

<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

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

or IF(AND(E3<>"",F3<>"",G3<>"",OR(B3="No",C3="No",D3="No")),1,0)

还要确保您在容器上轻拍

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

弹出式标记上的单张点击不能在移动设备上使用AngularJS / ui-leaflet

1 个答案: