Изменить маркер в зависимости от выбранной опции из выпадающего списка

Question

У меня есть карта с двумя маркерами ( от точки и до точки) с расчетом расстояния между двумя точками.Я пытаюсь создать раскрывающийся список, в котором при нажатии на опцию вторая точка ( до точка) изменяется и, таким образом, с вычисленным расстоянием.

Я застрял при мысли, какреализовать его и не иметь никаких решений.Моя цель заключается в том, чтобы при выборе Cebu City или Davao City из выпадающего списка на карте отображались их соответствующие точки и отображалось рассчитанное расстояние от Manila (которое является точкой отсчета):

    window.onload = function() {

    var coords = {
      manila: {name: "Manila", lat: 14.590, lon: 120.979},
      cebu:  {name: "Cebu", lat: 10.309, lon: 123.893},
      davao: {name: "Davao", lat: 7.063, lon: 125.608}
    };

    var map = L.map('mapid').setView([coords.manila.lat,coords.manila.lon], 13);

    // add layer to map:
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([coords.manila.lat,coords.manila.lon]).addTo(map);

    function createMarker()
    {
    	 var markerFrom = L.circleMarker([coords.manila.lat, coords.manila.lon], { color: "#F00", radius: 10 });
    	 var markerTo =  L.circleMarker([coords.cebu.lat, coords.cebu.lon], { color: "#4AFF00", radius: 10 });
    	 var from = markerFrom.getLatLng();
    	 var to = markerTo.getLatLng();
    	 markerFrom.bindPopup(coords.manila.name + ' ' + (from).toString());
    	 markerTo.bindPopup(coords.cebu.name + ' ' + (to).toString());
    	 map.addLayer(markerTo);
    	 map.addLayer(markerFrom);
    	 getDistance(from, to);
    }

    function getDistance(from, to)
    {
    	var container = document.getElementById('distance');
        container.innerHTML = (coords.manila.name + " to " + coords.cebu.name + " - " + (from.distanceTo(to)).toFixed(0)/1000) + ' km';
    }

    createMarker();
    };

#mapid { width: 400px; height: 300px;"}

<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js" defer></script>

<div id="mapid"></div>
<div id="distance"></div>

<select>
<option value="manila">Manila</option>
<option value="cebu">Cebu City</option>
<option value="davao">Davao City</option>
</select>

Answer 1

Вам необходимо отслеживать свои маркеры, если вы хотите изменить / удалить их.Поэтому вместо создания локальных переменных в функции createMarker создайте открытые переменные, к которым вы сможете обращаться к ним позже.

Шаг 1:

var markerFrom;
var markerTo;    

function createMarker()
{
     markerFrom = L.circleMarker([coords.manila.lat, coords.manila.lon], { color: "#F00", radius: 10 });
     markerTo =  L.circleMarker([coords.cebu.lat, coords.cebu.lon], { color: "#4AFF00", radius: 10 });
     var from = markerFrom.getLatLng();
     var to = markerTo.getLatLng();
     markerFrom.bindPopup(coords.manila.name + ' ' + (from).toString());
     markerTo.bindPopup(coords.cebu.name + ' ' + (to).toString());
     map.addLayer(markerTo);
     map.addLayer(markerFrom);
     getDistance(from, to);
}

Далее вам нужно знать, когда значение вашеговыберите изменения.

Шаг 2:

добавьте прослушиватель изменений к вашему выбору.

var destinationSelect = document.getElementById("cmbDestination");

destinationSelect.addEventListener("change", function() {

});

внутри функции изменения вам нужно удалить маркер текущего назначения, добавить новое назначениемаркер и обновите ваше расстояние.

Шаг 3:

destinationSelect.addEventListener("change", function() {
    // remove marker
    map.removeLayer(markerTo);

   // get selected value of select
   markerTo = // set selected value from select

   // add new marker according to the selected value
   map.addLayer(markerTo);

   // calculate distance
   var from = markerFrom.getLatLng();
   var to = markerTo.getLatLng();
   getDistance(from);      
});