使用Leaflet，如何获取折线弹出坐标并将其添加到弹出内容中

Question

我正在使用 Leaflet 库来制作地图，但遇到了一个小问题：

我有简单的非地理地图和连接两个坐标的简单线。当有人单击该行上的任意位置时，会打开一个弹出窗口。我试图在弹出窗口本身中显示单击点的坐标。

我尝试做这样的事情，但总是收到未定义的错误。

L.polyline([xy([296.4, -235.1]), xy([1426.3, 100.3])], {color: 'red'}).bindPopup('Coordinates: ' + L.getPopup.getLatLng).addTo(myLayerGroup);

我知道我应该getLatLng()在弹出窗口本身上调用该方法，但是我到底该怎么做呢？由于我从未将弹出窗口定义为单独的变量，因此如何引用弹出窗口本身？我的地图上有数百行，因此将每一行和弹出窗口声明为单独的变量并不是真正的最佳解决方案。

Answer 1

因此，我需要一种方法来获取出现在折线上方的弹出窗口的坐标并将其显示在弹出窗口本身中。这是我的解决方案，供将来发现此问题的人使用。

这是前提。我想同时在地图上显示城市标记和折线路线。最简单的方法是将它们添加到名为的同一个功能组中cities，然后将其简单地显示在地图上。这当然有效，但是捕获cities组上的弹出窗口来更改它们将导致更改标记和折线的弹出窗口。我不想那样做。我只想更改折线的弹出窗口。

解决方案是将城市标记和折线路线分成两组，cities并且cityRoutes。添加cityRoutes到cities可以同时在地图上显示它们，但也可以添加cityRoutes到polylines。这次我可以从组中捕获弹出窗口打开事件polylines并更改折线的弹出内容，但保持城市标记弹出窗口不变。

var polylines = new L.FeatureGroup(); // Declare a group in which to store all polylines.
var cities = new L.FeatureGroup(); // Declare a group in which to store all cities.
var cityRoutes = new L.FeatureGroup(); // Declare a group in which to store all city routes.
cityRoutes.addTo(cities);
cityRoutes.addTo(polylines);

// Add a couple of markers
L.marker([-229.0, -267.8]).bindPopup('City 1').addTo(cities);
L.marker([229.0, -67.8]).bindPopup('City 2').addTo(cities);

// Add a route
L.polyline([-229.0, -267.8], [229.0, -67.8]).bindPopup('Route 1').addTo(cityRoutes);

// Catch event when popup opens above polyline and add its coordinates to its content
polylines.on('popupopen', function (e) {
    var popup = e.popup;
    popup.setContent('Coordinates: ' +  popup.getLatLng().lng + ' / ' + popup.getLatLng().lat);
});

当然，现在我可以只捕获弹出事件cityRoutes，在这个简单的示例中这将是一个更短的解决方案，但就我而言，我有多个路线组，如 islandRoutes、cityRoutes、shipRoutes 等。这意味着我必须捕获分别在每条路线上方弹出事件。这增加了很多冗余代码。更简单的解决方案是将所有路线添加到称为折线的第三个功能组，并捕获该组上的事件。