使用iPhone和iPad的Safari中的传单地图问题 [英] Leaflet map issue in Safari using iPhone and iPad

问题描述

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

I am having some weird issue with the leaflet map using Safari in iPhone and iPad. I am using an AJAX GET request to fetch the markers on the map and binding the popup content while fetching. In the popup window, I have a button which opens a bootstrap modal when a user clicks on it to view details. It works fine in Windows and Mac using IE, Chrome, Safari, Firefox but I cannot make it working with the iPhone and iPad Safari browser. Here is my code for fetching the data:

    $(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和其他浏览器中完美工作时，没有任何反应。

I have the same issue with map layer control. Nothing happens when the user clicks on the control to switch to Arial or Terrian when it works perfectly in IE and other browsers.

任何帮助表示赞赏。

推荐答案

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

I confirm Nasir item is the correct one. Thanks!

具体而言，我在Leaflet.GoogleMutant.js中更改了以下行：

Specifically, I changed in Leaflet.GoogleMutant.js the following line from

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

现在它可以工作。

我不确定这种变化会受到什么影响，但...感谢您的意见

I'm not sure what is affected by this change though... thanks for comments

Luigi

这篇关于使用iPhone和iPad的Safari中的传单地图问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！