Question

我有一张带有两个标记的地图（一个 from 点和一个 to 点），并计算了两个点之间的距离。我正在尝试制作一个下拉列表，单击某个选项时，第二个点（至点）将更改，因此计算的距离也将更改。

我一直在思考如何实现它，并且没有解决方案。我的目标是从下拉列表中选择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);      
});

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

1 个答案: