Leaflet: Ändern der Kartenmitte, wenn die Auswahl geändert wird

Question

Ich habe eine Broschüre mit einer Karte select. Die select enthält Position mit einer Koordinaten als Wert.

Wenn ich die select ändern, sollte die Karte neu laden und ändern Sie die Kartenmitte abhängig von dem Wert der Auswahl.

Hier ist mein Code:

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>

Answer 1

konnte ich nicht tun, was Sie value = "[11.5529, 122.7407]" im Optionswert mit wollen.

Zuerst ändern Sie die value der select Tag. Zum Beispiel:

<select id="loc" onchange="change_map()"> 
    <option value="1">Roxas City</option> 
    <option value="2" selected>Ivisan</option> 
</select> 

In Ihrer Funktion onchange dies tun:

// 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); } 
} 

Hier ist die JSFiddle example.

Jeder andere Vorschlag wird begrüßt.

Ich hoffe, ich war hilfreich.