Question

我在iPhone和iPad上使用Safari的传单地图有一些奇怪的问题。我正在使用AJAX GET请求来获取地图上的标记并在获取时绑定弹出内容。在弹出窗口中，我有一个按钮，当用户单击它以查看详细信息时，该按钮将打开引导模式。它在Windows和Mac上使用IE，Chrome，Safari，Firefox都可以正常工作，但我无法使用iPhone和iPad Safari浏览器。这是我获取数据的代码：

    $(function(e) {
    var latlng = L.latLng(-30.81881, 116.16596);
    var map = L.map('lmap', {
        center: latlng,
        zoom: 6
    });
    var lcontrol = new L.control.layers();
    var eb = new L.control.layers();
    //clear the map first
    clearMap();
    //resize the map
    map.invalidateSize(true);
    //load the map once all layers cleared
    loadMap();
    //reset the map size on dom ready
    map.invalidateSize(true);

    function loadMap(e) {
        //show loading overlay
        $(".loadingOverlay").show();
        var roadMutant = L.gridLayer.googleMutant({
            type: 'roadmap'
        }).addTo(map);
        var satMutant = L.gridLayer.googleMutant({
            maxZoom: 24,
            type: 'satellite'
        });
        var terrainMutant = L.gridLayer.googleMutant({
            maxZoom: 24,
            type: 'terrain'
        });
        var hybridMutant = L.gridLayer.googleMutant({
            maxZoom: 24,
            type: 'hybrid'
        });
        //add the control on the map          
        lcontrol = L.control.layers({
            Roadmap: roadMutant,
            Aerial: satMutant,
            Terrain: terrainMutant,
            Hybrid: hybridMutant //,Styles: styleMutant
        }, {}, {
            collapsed: false
        }).addTo(map);

        var markers = L.markerClusterGroup({
            chunkedLoading: true,
            spiderfyOnMaxZoom: true,
            maxClusterRadius: 80,
            showCoverageOnHover: true
        });
        //clear markers and remove all layers
        markers.clearLayers();

        var st = atype + "";
        $.ajax({
            type: "GET",
            url: appUrl + "/Home/map", // '@Url.Action("map", "Alerts")',
            data: {
                'atype': st
            },
            dataType: 'json',
            contentType: 'application/x-www-form-urlencoded',
            success: function(data) {
                $.each(data, function(i, item) {
                    var img = (item.IconUrl).replace("~", "");
                    var Icon = L.icon({
                        iconUrl: appUrl + img,
                        iconSize: [42, 42]
                    });
                    var id;
                    var marker = L.marker(L.latLng(item.Latitude, item.Longitude), {
                        icon: Icon
                    }, {
                        title: item.Name
                    });
                    var content = "<div class='infoDiv'><h3><img src='" + appUrl + img + "' width='24' />" + item.Name + "</h3><p>" + item.Title + "</p><a href='#' data-value='" + item.AlertId + "' class='btn btn-success btn-sm' data-toggle='modal' data-target='#alertDetails'>Details</a></div>";
                    id = marker._leaflet_id;
                    marker.bindPopup(content);
                    markers.addLayer(marker);
                });
            }
        }).done(function() {
            $(".loadingOverlay").hide();
            map.invalidateSize(true);
        });

        map.addLayer(markers);
        //set initial zoom
        map.setZoom(6);

    }


    function clearMap() {
        // clear all layers before it reloads;
        map.eachLayer(function(layer) {
            map.removeLayer(layer);
        });
        map.removeControl(lcontrol);
        map.removeControl(eb);
    }
    map.on('focus', function() {
        map.scrollWheelZoom.enable();
    });
    map.on('blur', function() {
        map.scrollWheelZoom.disable();
    });
});

我在地图图层控制方面遇到了同样的问题。当用户在IE和其他浏览器中完美地工作时，当用户点击控件切换到Arial或Terrian时，没有任何反应。

任何帮助表示感谢。

Answer 1

我确认Nasir项目是正确的。谢谢！

具体来说，我在Leaflet.GoogleMutant.js中更改了以下一行

this._mutantContainer.style.zIndex = '800'; //leaflet map pane at 400, controls at 1000

到

this._mutantContainer.style.zIndex = '399'; //leaflet map pane at 400, controls at 1000

现在它有效。

我不确定这种变化会对此产生什么影响...感谢您的评论

路易

Answer 2

我在iOS设备上测试我的应用时遇到了这个问题。问题是Safari不支持caniuse.com中描述的pointer-events，因为googleMutant插件CSS通过使用z-index CSS类将leaflet-top值设置为1000，浏览器认为它位于其他所有位置之上。

这会导致您在googleMutant图层而不是控制图层上触发点击和触摸。

将z-index值重置为较低的值，至少有一个值低于控制层的值应解决此问题。至少它对我有用。

Safari中的传单地图问题使用iPhone和iPad

2 个答案: