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

我在iPhone和iPad上使用Safari的单张地图出现了一些奇怪的问题。我正在使用AJAX GET请求来获取地图上的标记，并在获取时绑定弹出内容。在弹出窗口中，我有一个按钮，当用户点击它以查看详细信息时，它将打开引导模式。它适用于使用IE，Chrome，Safari，Firefox的Windows和Mac，但无法使用iPhone和iPad Safari浏览器。这里是我的代码获取数据：使用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和其他浏览器中完美工作时，没有任何反应。

任何帮助表示赞赏。

来源

2017-02-22 Tajuddin

任何帮助，请受影响？ – Tajuddin

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

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

而现在它的工作原理。

我不知道什么是这种变化虽然...感谢您的意见

路易吉

来源

2017-04-22 16:09:58 lui

这绝对是与谷歌突变JS文件。当我使用openStreet地图时，它完美地工作。我会尝试你的建议。 – Tajuddin

就是这样，我已经取消注释这行'this._mutantContainer.style.zIndex ='auto';'它现在起作用了。感谢您的建议。 – Tajuddin

它看起来像插件的最新版本已解决此问题。一探究竟。 –

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

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

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

来源

2017-03-13 11:14:16

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

回答

相关问题