当地图放大时，圈子在手机上消失

Question

当我在PC上缩放地图时，圆圈渲染效果良好，并且功能齐全。但是，当我尝试在移动设备（iOS）上查看地图时，圆形渲染效果很好，但如果我放大或缩小屏幕，它们最终会消失（几次交互之后）。有些圈子根本不渲染。此外，工具提示不会触摸。有什么我失踪？在寻找解决方案时，我找不到任何可以解释此行为的解决方案。

在此先感谢您提供任何提示或解决方案。代码是codepen - http://codepen.io/kvyb/pen/VPqWNR?editors=0010

HTML

<!--D3 --> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script> 
<!--Leaflet/Mapbox --> 
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script> 
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' /> 

<!--Div to hold the map. Inline styling is horrible I know, it's just for demo purpose... --> 
<div id="map" style="position: absolute; height: 100%; width: 100%;"></div> 

CSS

div.tooltip { 
    position: absolute;   
    text-align: center;   
    width: 60px;      
    height: 28px;     
    padding: 2px;    
    font: 12px sans-serif;  
    background: lightsteelblue; 
    border: 0px;   
    border-radius: 8px;   
    pointer-events: none;   
} 

JS

// Map details 
// Define the div for the tooltip 
var div = d3.select("body").append("div") 
    .attr("class", "tooltip")    
    .style("opacity", 0); 

L.mapbox.accessToken = 'pk.eyJ1Ijoic3RlbmluamEiLCJhIjoiSjg5eTMtcyJ9.g_O2emQF6X9RV69ibEsaIw'; 
var map = L.mapbox.map('map', 'mapbox.streets').setView([53.4072, -2.9821], 14); 

// Sample Data 
var data = [ 
    {"coords": [53.3942, -2.9785]}, 
    {"coords": [53.4082, -2.9837]}, 
    {"coords": [54.4082, -2.9837]}, 
]; 

// Loop through data and create d.LatLng 
data.forEach(function(d) { 
    d.LatLng = new L.LatLng(d.coords[0], d.coords[1]); 
    //blue rings around circles: 
    map.addLayer(L.circle([d.coords[0], d.coords[1]], 0)); 

}); 

// Append <svg> to #map 
var svg = d3.select(map.getPanes().overlayPane).append("svg") 
    .attr("class", "leaflet-zoom-animated") 
    .attr("width", window.innerWidth) 
    .attr("height", window.innerHeight); 

// Append <g> to <svg> 
var g = svg.append("g").attr("class", "leaflet-zoom-hide"); 

// Append <circle> to <g> 
var circles = g.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .style("fill", "rgba(255, 255, 255, .7)") 
.on("mouseover", function(d) { 
      d3.select(this).style("cursor", "default") 
      div.transition()   
       .duration(200)  
       .style("opacity", .9);  
      div .html("formatTime(d.date) ++ d.close") 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px");  
      }) 
.on("touchstart",function(d) { 
      d3.select(this).style("cursor", "default") 
      div.transition()   
       .duration(200)  
       .style("opacity", .9);  
      div .html("formatTime(d.date) ++ d.close") 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px");  
      }) 
    .on("touchend", function(d) {  
       div.transition()   
       .duration(500)  
       .style("opacity", 0); 
     }) 
     .on("mouseout", function(d) {  
       div.transition()   
       .duration(500)  
       .style("opacity", 0); 
     }); 


function update() { 
    translateSVG() 
    circles.style("stroke", "gray") 
    circles.attr("cx", function(d) { return map.latLngToLayerPoint(d.LatLng).x; }) 
    circles.attr("cy", function(d) { return map.latLngToLayerPoint(d.LatLng).y; }) 
    circles.attr("r", "30") 
} 

// Adjust the circles when the map is moved 
function translateSVG() { 
    var viewBoxLeft = document.querySelector("svg.leaflet-zoom-animated").viewBox.animVal.x; 
    var viewBoxTop = document.querySelector("svg.leaflet-zoom-animated").viewBox.animVal.y; 
    // Reszing width and height incase of window resize 
    svg.attr("width", window.innerWidth) 
    svg.attr("height", window.innerHeight) 
     // Adding the ViewBox attribute to our SVG to contain it 
    svg.attr("viewBox", function() { 
     return "" + viewBoxLeft + " " + viewBoxTop + " " + window.innerWidth + " " + window.innerHeight; 
    }); 
    // Adding the style attribute to our SVG to transkate it 
    svg.attr("style", function() { 
     return "transform: translate3d(" + viewBoxLeft + "px, " + viewBoxTop + "px, 0px);"; 
    }); 
} 

// Re-draw on reset, this keeps the markers where they should be on reset/zoom 
map.on("moveend", update); 
update(); 

Answer 1

我想你的SVG的是，因为这些元素的CSS的dissapearing是默认设置到overflow: hidden。你可以尝试设置溢出到覆盖在你的js代码为svg.attr：

function translateSVG() { 
... 
svg.attr("style", function() { 
     return "overflow: overlay;" + 
      "transform: translate3d(" + viewBoxLeft + "px, " + viewBoxTop + "px, 0px);"; 
}); 
} 

---

关于应用程序的移动设备上的行为，你记得设置的元吧？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

另一件值得调试的事情是，如果您的移动设备上的地图甚至会对点击做出响应。在示例中，使用简单警报创建功能，以检查您在地图上点击是否触发了警报功能。

我没有这个问题，但我看书上说在这种情况下它可能有助于以下属性添加到div包含地图：

data-tap-disabled="true"