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

qaxu7uf2  于 2023-04-04  发布在  Java
关注(0)|答案(2)|浏览(211)

我正在使用Leaflet库的Map,我遇到了一个小问题:
我有一个简单的非地理Map,并与一个简单的线连接两个坐标。当有人点击任何地方的线,弹出窗口打开。我试图显示在弹出窗口本身点击点的坐标。
我试着做这样的事情,但我总是得到未定义的错误。

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

我知道我应该在popup本身上调用getLatLng()方法,但是我到底该怎么做呢?如何引用popup本身,因为我从来没有将它定义为一个单独的变量?我在Map上有数百行,所以将每行和popup声明为一个单独的变量并不是最佳的解决方案。

0yg35tkg

0yg35tkg1#

所以我需要一种方法来获得弹出窗口的坐标,它出现在折线上方,并显示在弹出窗口本身。
前提是。我想在Map上同时显示城市标记和折线路线。最简单的方法是将它们添加到同一个名为cities的要素组中,然后简单地在Map上显示。这当然有效,但是捕获cities组上的弹出窗口来改变它们会导致从标记和折线改变弹出窗口。我不想这样做。我只想改变多段线的弹出窗口。
解决方案是将城市标记和折线路线分成两组,citiescityRoutes。将cityRoutes添加到cities以同时在Map上显示它们,但另外将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,这意味着我必须分别捕获每个路由上面的弹出事件。这增加了许多冗余代码。更简单的解决方案是将所有路径添加到第三个要素组(称为折线),并捕获该组上的事件。

kcwpcxri

kcwpcxri2#

如果你看一下L.Layer的popup方法,你会发现它有一个getPopup方法:
返回绑定到此层的弹出窗口。
http://leafletjs.com/reference-1.1.0.html#layer-getpopup
请注意,当弹出窗口打开时,您只能使用getLatLng方法,因此您需要在L.Mappopupopen事件上设置内容:

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

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

因此,您也可以使用包含在popupopen事件对象中的popup引用:

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

相关问题