Javascript 缩放地图时，圆圈在移动设备上消失

当我在PC上缩放地图时，圆圈渲染得很好，功能齐全。然而，当我尝试在移动iOS上查看地图时，圆圈最初渲染得很好，但如果我缩放或平移屏幕，它们最终会在多次交互后消失。有些圆根本不渲染。此外，触摸时不会显示工具提示。我有什么遗漏吗？在寻找解决方案时，我找不到任何可以解释这种行为的东西

提前感谢您提供的任何提示或解决方案。代码在代码笔上-

HTML

JS

---

我认为您的svg已经过时了，因为这些元素的css默认设置为overflow:hidden。您可以尝试在svg.attr的js代码中将overflow设置为overlay：

关于应用程序在移动设备上的行为，您是否记得为其设置元数据

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

---

谢谢，不确定哪一点，但你的解决方案为我解决了问题@克里斯蒂安·维比拉尔很高兴听到这有帮助，欢迎你：

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

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

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" />

data-tap-disabled="true"