iPhoneとiPadを使用したSafariのリーフレットマップの問題

Question

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(); 
    }); 
}); 

私は地図レイヤーコントロールで同じ問題があります。 ArialやTerrianに切り替えるためにコントロールをクリックすると、IEや他のブラウザで完全に機能するときに何も起こりません。

助けてください。

Answer 1

Nasirの項目が正しいことを確認します。ありがとう！

具体的には、私は

this._mutantContainer.style.zIndex = '399'; //leaflet map pane at 400, controls at 1000 

に

this._mutantContainer.style.zIndex = '800'; //leaflet map pane at 400, controls at 1000 

からLeaflet.GoogleMutant.jsに次の行を変更し、今では動作します。私もこの変更の影響を受けているかわからないんだけど

...コメント

ルイージ

Answer 2

iOSデバイスで自分のアプリをテストしている間、この問題が発生しました。問題はSafariがcaniuse.comに記載されているようにpointer-eventsをサポートしていないことと、googleMutantプラグインCSSがleaflet-top CSSクラスを使用してz-indexの値を1000に設定しているためです。

この結果、コントロールレイヤーではなくgoogleMutantレイヤーでクリックとタッチが発生します。

z-indexの値を低い値にリセットすると、コントロールレイヤーの値よりも低い値の1つ以上がこの問題を解決するはずです。少なくともそれは私のためにした。