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

Question

我在 iPhone 和 iPad 中使用 Safari 时遇到传单地图的一些奇怪问题。我正在使用 AJAX GET 请求来获取地图上的标记并在获取时绑定弹出内容。在弹出窗口 window 中，我有一个按钮，当用户单击它以查看详细信息时，它会打开一个 bootstrap 模式。它在 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();
    });
});

我对地图图层控制也有同样的问题。当用户点击控件切换到 Arial 或 Terrian 在 IE 和其他浏览器中完美运行时没有任何反应。

感谢任何帮助。

Answer 1

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

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

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

Answer 2

我确认 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

现在可以使用了。

虽然我不确定此更改会影响什么...感谢您的评论

路易吉

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

Leaflet map issue in Safari using iPhone and iPad

asp.net-mvc

jquery

google-maps

ipad

leaflet