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

如果你看一下L.Layer的弹出窗口方法，你会发现它有一个getPopup方法：

返回绑定到该图层的弹出窗口。

http://leafletjs.com/reference-1.1.0.html#layer-getpopup

请注意，您只能在弹出窗口时使用getLatLng方法，因此您需要在popupopen L.Map事件中设置内容：

var polyline = new L.Polyline([[0, -25],[0, 25]]).bindPopup('...').addTo(map);

map.on('popupopen', function () {
    var popup = polyline.getPopup();
    // do stuff
});

因此您可以使用popupopen事件对象中包含的弹出引用：

map.on('popupopen', function (e) {
    var popup = e.popup;
    // do stuff
});

Answer 2

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

这是前提。我想在地图上同时显示城市标记和折线路线。最简单的方法是将它们添加到名为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等。这意味着我必须分别捕获每条路线上方的弹出事件。这增加了许多冗余代码。更简单的解决方案是将所有路径添加到称为折线的第三个特征组，并捕获该组上的事件。

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

2 个答案: