更新：传单的折线似乎存在冲突（代码在主代码部分的示例中有行。这是指向折线传单库的链接 - https://github.com/bbecquet/Leaflet.PolylineDecorator
由于某种原因，我无法使工具提示出现在移动触摸事件上的mapbox js地图上。否则一切都适用于移动浏览器
该代码在非移动浏览器上运行良好，带有信息的工具提示显示在地图上的正确位置。
我尝试了一切，看来问题是地图框或传单干扰了移动设备上的d3.js。非常感谢任何帮助。
使用工具提示的示例，该工具提示适用于移动设备，我将工具提示代码基于http://bl.ocks.org/d3noob/a22c42db65eb00d4e369
以下是适用于桌面的代码：
此处还提供了一个工作示例：http://ec2-54-193-23-111.us-west-1.compute.amazonaws.com/G/Croatia/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<script src='https://rawgit.com/bbecquet/Leaflet.PolylineDecorator/master/leaflet.polylineDecorator.js'></script>
<!-- JQuery -->
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
<!--Bootstrap,MDBootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.css" rel="stylesheet">
<style>
div.tooltip {
z-index: 99 !important;
font-weight: bold;
position: fixed;
text-align: left;
left: 5vw;
top: 5vh;
padding: 4px;
font-size: 14px;
font-family: 'Roboto', sans-serif;
color: white;
background: #F9A13A;
/* text-shadow: -1px 0 #2d2d2d, 0 1px #2d2d2d, 1px 0 #2d2d2d, 0 -1px #2d2d2d; */
border: 5px;
border-radius: 8px;
pointer-events: none;
line-height: 150%;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.mapbox-logo{
display: none !important;
}
.leaflet-control-container
{
left: 2500px !important;
}
</style>
</head>
<body>
<!--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%; z-index: 0 !important"></div>
<script>
// Map details
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("z-index", 99)
.style("opacity", 0);
var options = {
maxZoom: 16,
minZoom: 2,
zoomControl:false,
attributionControl: false
};
L.mapbox.accessToken = 'pk.eyJ1Ijoic3RlbmluamEiLCJhIjoiSjg5eTMtcyJ9.g_O2emQF6X9RV69ibEsaIw';
var map = L.mapbox.map('map', 'mapbox.streets', options).setView([42.572242,18.036804], 10)
L.control.zoom({
position:'topright'
}).addTo(map);
d3.json("https://gist.githubusercontent.com/kvyb/724e8bfe8c72654134799cc761ff5846/raw/0a66378bb4b0f9c2547ded49c9652147d0794d94/GJ_CMrally.json", function(error, d){
d.features.forEach(function(d) {
d.LatLng = new L.LatLng(d.geometry.coordinates[1],
d.geometry.coordinates[0])
/*blue rings around circles:
map.addLayer(L.circle([d.geometry.coordinates[1], d.geometry.coordinates[0]], 30));*/
})
// 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(d.features)
.enter()
.append("circle")
.style("fill", "#F9A13A")
.style("opacity", ".5")
.on("mouseover", function(d) {
div.transition()
.duration(500)
.style("opacity", .9);
/* POPUP CONTENTS */
div.html("<img src='"+d.properties.picurl+"'></ahref><br><br><h4 style='width: 380px; font-weight: 800; padding-left: 10px; padding-right: 10px; text-align: justify;'>"+ d.properties.name+"</h4><h5><p style='width: 380px; padding-left: 10px; padding-right: 10px; text-align: justify;'>"+d.properties.description+"</h4></p><br><ahref='"+d.properties.picurl+"'>");
})
.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 "overflow: overlay;" + "transform: translate3d(" + viewBoxLeft + "px, " + viewBoxTop + "px, 0px);";
});
}
map.on("moveend", update);
update();
});
</script>
<!-- SCRIPTS -->
</body>
折线示例（工具提示（.on（“鼠标悬停”......？与之冲突）：
var arrow = L.polyline([[42.66425712817397,18.057164303027093],
[42.66211119633724,18.05321609135717],
[42.66084884945838,18.048409572802484],
[42.65933399937257,18.04222976323217],
[42.6579453543725,18.03330337163061],
[42.657187898574165,18.025406948290765],
[42.65731414184796,18.016137233935297],
[42.65807159610854,18.007897487841547],
[42.65933399937257,17.998627773486078],
[42.661101320884526,17.987984768114984],
[42.66387843890958,17.973050228320062],
[42.667917663793055,17.954167487332597],
[42.67422842424367,17.928933264920488],
[42.68394574212255,17.89769089431502],
[42.691390450870465,17.876061560818925],
[42.70123123868246,17.850655677029863],
[42.71207953045137,17.824563147732988],
[42.72305203610675,17.80018723286048],
[42.73087033885652,17.78542435444251],
[42.73641821397499,17.776154640087043],
[42.74297415380717,17.770318153270637],
[42.74763853506004,17.766541602977668],
[42.75129415611192,17.764653327831184],
[42.75595791133251,17.764138343700324],
[42.76087338149683,17.763795020946418],
[42.76490629655112,17.76448166645423],
[42.76944301218857,17.765683296092902],
[42.77108118895814,17.76671326435462]], {color: '#F9A13A', weight: 10, opacity: 0.8}).addTo(map);