小冊子：選擇更改時更改地圖中心

我有一個帶有select的小冊子地圖。 select包含以座標爲值的位置。小冊子：選擇更改時更改地圖中心

當我更改select時，地圖應重新加載並更改地圖中心，具體取決於select的值。

這裏是我的代碼：

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/[email protected]/dist/leaflet.css" rel="stylesheet"/> 
 
<script src="https://unpkg.com/[email protected]/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>

來源

2016-12-20 ooo-Ghost-ooo

我不能做你想做的期權價值用什麼value = "[11.5529, 122.7407]"。

首先，更改select標記的value。例如：

<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。

任何其他建議將被認可。

希望我有幫助。

來源

2016-12-20 19:34:53

它的好，如果它不同於我的代碼。。並感謝您的答案。它的工作。=） –

不客氣。我很高興它的工作。 –

小冊子：選擇更改時更改地圖中心

回答

相關問題