jquery - 使用 iPhone 和 iPad 的 Safari 中的传单 map 问题

Question

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

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

感谢任何帮助。

Answer 1

我确认纳西尔的项目是正确的。谢谢!

具体来说，我在 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

现在它可以工作了。

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

路易吉