Question

我有一个传单地图（使用Vue和vue2-leaflet），其中包含许多预定义的节点以及它们之间的连接（存储在neo4j数据库中）。当用户单击节点（实际上是@mouseup）时，其所有连接均显示为多段线。我希望能够单击地图上的任何这些连接（线条）并对其进行处理，例如删除（会有弹出窗口或带有操作的内容，但这并不重要）。

我遇到的问题是click事件未记录连接ID（或任何可识别实际上已单击哪个连接的东西）。我当然可以为每个连接创建一条折线，但是我怀疑问题仍然存在，在我的情况下，这并不是一个真正的解决方案，因为我不知道每个节点有多少个连接，而v-for没有似乎不能与折线一起使用（至少我无法使其生效）。

这是节点标记代码：

<l-marker v-for="mapNode in MapStore.mapNodes"
  @mouseup="nodeClick($event, mapNode.index)"
  :lat-lng="[mapNode.latLng.lat, mapNode.latLng.lng]"
  :key="mapNode.index"
</l-marker>

...这是折线代码：

<l-polyline
  @mouseup="connectionClick($event)"
  :lat-lngs="MapStore.selectedConnections.latlngs"
/>

由于折线如预期那样显示，nodeClick函数正确填充了MapStore.selectedConnections。

问题是我没有看到传递给connectionClick函数的任何东西来识别单击了哪个连接，因此我可以使用它。

那有可能吗？

Answer 1

好吧，事实证明我错了，v-for正常工作（我认为我的代码有问题，但是我不确定是什么原因。）

我的解决方法是：

<l-polyline v-for="connection in MapStore.selectedConnections.latlngs"
  @mouseup="connectionClick($event, connection)"
  :lat-lngs="connection" />

通过这种方式迭代连接，为每个连接生成一条单独的折线，然后将connectionClick函数传递给所单击连接的latlngs。

点击后如何从leafletjs折线中选择一行？

1 个答案: