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

我在iPhone和iPad上使用Safari的传单地图有一些奇怪的问题。 我正在使用AJAX GET请求来获取地图上的标记并在获取时绑定弹出内容。 在弹出窗口中，我有一个按钮，当用户单击它以查看详细信息时，它会打开一个引导模式。 它在Windows和Mac上使用IE，Chrome，Safari，Firefox都可以正常工作但我无法使用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 = "
" + item.Name + "
" + item.Title + "
Details
"; 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(); }); }); 

我对地图图层控制有同样的问题。 当用户在IE和其他浏览器中完美地工作时，当用户点击控件切换到Arial或Terrian时，没有任何反应。

任何帮助赞赏。

Answer 1

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

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

现在它有效。

我不确定这个变化会对此产生什么影响…感谢您的评论

路易吉

Answer 2

我在iOS设备上测试我的应用时遇到了这个问题。 问题是Safari不支持caniuse.com上描述的pointer-events ，因为googleMutant插件CSS通过使用leaflet-top CSS类将z-index值设置为1000，浏览器认为它位于上面其他一切。

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

将z-index值重置为较低的值，至少一个低于控制层的值应解决此问题。 至少它对我有用。