我正在使用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声明为一个单独的变量并不是最佳的解决方案。
2条答案
按热度按时间0yg35tkg1#
所以我需要一种方法来获得弹出窗口的坐标,它出现在折线上方,并显示在弹出窗口本身。
前提是。我想在Map上同时显示城市标记和折线路线。最简单的方法是将它们添加到同一个名为
cities
的要素组中,然后简单地在Map上显示。这当然有效,但是捕获cities
组上的弹出窗口来改变它们会导致从标记和折线改变弹出窗口。我不想这样做。我只想改变多段线的弹出窗口。解决方案是将城市标记和折线路线分成两组,
cities
和cityRoutes
。将cityRoutes
添加到cities
以同时在Map上显示它们,但另外将cityRoutes
添加到polylines
。这次我可以从polylines
组中捕获弹出打开事件并更改折线的弹出内容,但保持城市标记弹出窗口不变。当然,我可以只捕获
cityRoutes
上的弹出事件,在这个简单的示例中,这将是一个更短的解决方案,但在我的示例中,我有多个路由组,如islandRoutes,cityRoutes,这意味着我必须分别捕获每个路由上面的弹出事件。这增加了许多冗余代码。更简单的解决方案是将所有路径添加到第三个要素组(称为折线),并捕获该组上的事件。kcwpcxri2#
如果你看一下
L.Layer
的popup方法,你会发现它有一个getPopup
方法:返回绑定到此层的弹出窗口。
http://leafletjs.com/reference-1.1.0.html#layer-getpopup
请注意,当弹出窗口打开时,您只能使用
getLatLng
方法,因此您需要在L.Map
的popupopen
事件上设置内容:因此,您也可以使用包含在
popupopen
事件对象中的popup引用: