使用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中的單張地圖問題

回答

相關問題