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默认设置为overflow: hidden。您可以尝试在 svg.attr 的js代码中将溢出设置为叠加：

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"

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

1 个答案: