javascript - 根据选择下拉列表中单击的选项更改标记

Question

我有一张带有两个标记(从 点和一个到 点)的 map ，并计算了两点之间的距离。我正在尝试制作一个下拉列表，当单击一个选项时，第二个点(到点)会发生变化，因此计算的距离也会发生变化。

我一直在思考如何实现它，但没有想到解决方案。我的目标是，当从下拉列表中选择 Cebu City 或 Davao City 时，它们各自的点将显示在 map 上，并计算出与 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 函数中创建局部变量，而是创建公共(public)变量，以便稍后访问它们。

第一步:

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