我下面有一个简单的代码，它将在传单中显示 map ，这就是
<!DOCTYPE html>
<!-- saved from url=(0054)http://leafletjs.com/examples/quick-start-example.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
</head>
<body>
<div id="map" style="width: 600px; height: 400px; position: relative;" class="leaflet-container leaflet-fade-anim" tabindex="0"><div class="leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-tile-pane"><div class="leaflet-layer"><div class="leaflet-tile-container"></div><div class="leaflet-tile-container leaflet-zoom-animated"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 56px; top: -91px;" src="./Leaflet Quick Start Guide Example_files/2723.png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 312px; top: -91px;" src="./Leaflet Quick Start Guide Example_files/2723(1).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 56px; top: 165px;" src="./Leaflet Quick Start Guide Example_files/2724.png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 312px; top: 165px;" src="./Leaflet Quick Start Guide Example_files/2724(1).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -200px; top: -91px;" src="./Leaflet Quick Start Guide Example_files/2723(2).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 568px; top: -91px;" src="./Leaflet Quick Start Guide Example_files/2723(3).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -200px; top: 165px;" src="./Leaflet Quick Start Guide Example_files/2724(2).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 568px; top: 165px;" src="./Leaflet Quick Start Guide Example_files/2724(3).png"></div></div></div><div class="leaflet-objects-pane"><div class="leaflet-shadow-pane"><img src="./Leaflet Quick Start Guide Example_files/marker-shadow.png" class="leaflet-marker-shadow leaflet-zoom-animated" style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; transform: translate3d(300px, 247px, 0px);"></div><div class="leaflet-overlay-pane"><svg class="leaflet-zoom-animated" width="1172" height="781" viewBox="-286 -191 1172 781" style="transform: translate3d(-286px, -191px, 0px);"><g><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="red" stroke-opacity="0.5" stroke-width="5" fill="#f03" fill-opacity="0.5" class="leaflet-clickable" d="M183,130A42,42,0,1,1,182.9,130 z"></path></g><g><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#0033ff" stroke-opacity="0.5" stroke-width="5" fill="#0033ff" fill-opacity="0.2" class="leaflet-clickable" d="M358 163L474 219L550 153z"></path></g></svg></div><div class="leaflet-marker-pane"><img src="./Leaflet Quick Start Guide Example_files/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-clickable" tabindex="0" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(300px, 247px, 0px); z-index: 247;"></div><div class="leaflet-popup-pane"><div class="leaflet-popup leaflet-zoom-animated" style="opacity: 1; transform: translate3d(300px, 247px, 0px); bottom: 27px; left: -56px;"><a class="leaflet-popup-close-button" href="http://leafletjs.com/examples/quick-start-example.html#close">×</a><div class="leaflet-popup-content-wrapper"><div class="leaflet-popup-content" style="width: 74px;"><b>Hello world!</b><br>I am a popup.</div></div><div class="leaflet-popup-tip-container"><div class="leaflet-popup-tip"></div></div></div></div></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="http://leafletjs.com/examples/quick-start-example.html#" title="Zoom in">+</a><a class="leaflet-control-zoom-out" href="http://leafletjs.com/examples/quick-start-example.html#" title="Zoom out">-</a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="http://leafletjs.com/" title="A JS library for interactive maps">Leaflet</a> | 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></div></div></div></div>
<script src="./Leaflet Quick Start Guide Example_files/leaflet.js"></script>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
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-i875mjb7'
}).addTo(map);
</script>
</body></html>
我只是想问当我点击链接按钮时如何转移或更改 map View
Ex.
If i click Afghanistan
<button type="button">View Map of Afghanistan</button>
If i click iraq
<button type="button">View Map of Iraq</button>
我希望网站不会刷新，只是 map 会改变。感谢任何帮助 TY
最佳答案
您需要输入正确的 map ID(转到 Mapbox 并从他们的示例之一获取它，或者创建一个帐户并设计您自己的帐户)。 您的 div 工作所需的唯一 html 标记是
<!DOCTYPE html>
<!-- saved from url=(0054)http://leafletjs.com/examples/quick-start-example.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style type="text/css">
#map { height: 480px; }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i86nkdio/{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-i875mjb7'
}).addTo(map);
var gotocountry = function(c){
// you get afghanistan coordinates from google
if(c=='af')
map.setView(new L.LatLng(34.5333, 69.1333), 6);
if(c=='tn')
map.setView(new L.LatLng(34,9), 6);
return;
};
</script>
<br/>
<a onclick="gotocountry('af')"> Afghanistan</a>
<a onclick="gotocountry('tn')"> Tunisia</a>
</body></html>关于javascript - 如何更改点击传单上的 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27881042/