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

Posted 2023-03-15

【中文标题】使用 iPhone 和 iPad 的 Safari 中的传单地图问题

【英文标题】：Leaflet map issue in Safari using iPhone and iPad

【发布时间】：2017-02-22 08:58:12

【问题描述】：

我在 iPhone 和 iPad 上使用 Safari 的传单地图遇到了一些奇怪的问题。我正在使用 AJAX GET 请求来获取地图上的标记并在获取时绑定弹出内容。在弹出窗口中，我有一个按钮，当用户单击它以查看详细信息时，它会打开一个引导模式。它在使用 IE、Chrome、Safari、Firefox 的 Windows 和 Mac 中运行良好，但我无法使其与 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 时，没有任何反应。

任何帮助表示赞赏。

【参考方案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

现在它可以工作了。

我不确定此更改会影响什么...感谢 cmets

路易吉

【讨论】：

这绝对是和 Google Mutant JS 文件有关。当我使用 openStreet 地图时，它可以完美运行。我会试试你的建议。

就是这样，我取消了对这一行的注释 `this._mutantContainer.style.zIndex = 'auto';` 现在它可以工作了。感谢您的建议。

看来最新版本的插件已经解决了这个问题。看看吧。

嗨 Nasir，我使用了这个 gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant/blob/…，它仍然包含问题。但是，如果我将代码中的 z-index 从 800 更改为 399 似乎没问题。虽然不确定副作用....

【参考方案2】：

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

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

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

【讨论】：

我只是想确认当前的读者，iOS 现在确实支持pointer-event