关于很棒的传单 map ,我遇到了一个小问题。我想显示一张带有几个标记的 map 。在这张 map 下方,我想放置一些内容,包括偶尔出现的链接,单击该链接时,该链接将移动并缩放到其中一个标记。我在 Stack Overflow 上找到了一些代码,应该可以解决这个问题,但它对我不起作用,而且我无法弄清楚我在哪里走错了方向。
这是我用于 map 和缩放 onclick 的代码:
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var map = L.map('map').setView([48.45653, 8.90068], 8);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-i86knfo3'
}).addTo(map);
var circle = L.circle([48.06591, 7.67221], 80, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.3
}).addTo(map)
.bindPopup("Popup").openPopup();
L.marker([48.06633, 7.67268]).addTo(map)
.bindPopup("<b>Popup</b><br />Text");
L.marker([48.8098, 9.44223]).addTo(map)
.bindPopup("<b>Popup</b><br />Text");
document.getElementById('map-navigation').onclick = function(abc) {
var pos = abc.target.getAttribute('data-position');
var zoom = abc.target.getAttribute('data-zoom');
if (pos && zoom) {
var locat = pos.split(',');
var zoo = parseInt(zoom);
map.setView(locat, zoo, {animation: true});
return false;
}
}
var popup = L.popup();
</script>
这是我用作链接的 html:
<div id="map">
<div id="map-navigation" class="map-navigation">
<a href="#" data-zoom="12" data-position="48.06633,7.67268">
Link
</a>
</div>
</div>
最佳答案
您必须将包含链接的 div 放在 map 的 div 之外,如下所示
<div id="map">
</div>
<div id="map-navigation" class="map-navigation">
<a href="#" data-zoom="12" data-position="48.06633,7.67268">
Link
</a>
</div>
然后就可以正常工作了:http://jsfiddle.net/FranceImage/ejty9tu9/
关于dictionary - 使用链接和map.setView将传单放大到位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25340051/