我有一张带有选择
的传单 map 。 select
包含以坐标作为值的位置。
当我更改选择
时, map 应重新加载并根据选择的值更改 map 中心。
这是我的代码:
var coor =[11.5303, 122.6842];
var mymap = L.map('mapid').setView(coor, 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(mymap);
mymap.on('click', onMapClick);
<link href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<div style="border:1px solid grey; width:500px;height:310px; margin:0 auto; margin-top:20px;">
<select id="loc" onchange="change_map()">
<option value="[11.5529, 122.7407]">Roxas City</option>
<option value="[11.5303, 122.6842]">Ivisan</option>
</select>
<div id="mapid" style="width: 100%; height: 100%;"></div>
</div>
最佳答案
我无法在选项值中使用 value = "[11.5529, 122.7407]"
执行您想要的操作。
首先,更改 select
标记的值
。例如:
<select id="loc" onchange="change_map()">
<option value="1">Roxas City</option>
<option value="2" selected>Ivisan</option>
</select>
在你的函数onchange
中执行以下操作:
// onchange function (this format makes the function global)
window.change_map = function(){
// Get the select element
var e = document.getElementById("loc");
// Get the value of the selected index
var v = e.value;
// Verify the value and set the map to the new center
if( v == "1" ){ mymap.setView([11.5529, 122.7407], zoom); }
else if( v == "2" ) { mymap.setView([11.5303, 122.6842], zoom); }
}
这是JSFiddle example 。
如有任何其他建议,我们将不胜感激。
希望我能有所帮助。
关于javascript - 传单:选择更改时更改 map 中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41247539/