【发布时间】:2023-03-14 05:38:01
【问题描述】:
首先,我正在尝试使用 Angular.js 创建类似的东西: https://foursquare.com/explore?mode=url&near=San%20Francisco%2C%20CA&q=comedy
总而言之,以下是我尝试过的工具:
- Mapbox.js
- Leaflet.js
- Angular-Leaflet 指令
对于每一个,我都尝试创建一个指令来管理与显示这些位置的地图相关联的位置列表,这样,当用户将鼠标悬停在列表项上时,工具提示会出现在位置标记上方地图上,当他们将鼠标悬停在地图上的位置标记上方时,该标记上方会出现一个工具提示。 (如果不清楚,请访问上面的链接。)超链接、图像等应该能够出现在工具提示中。以上似乎都没有直接给我这个功能的地图部分。此外,为了让标记出现在地图上,我必须从本质上脱离惯用的 Angular,因为标记是通过 Leaflet/Mapbox 工具包生成的矢量项。写这段代码感觉不对。是的,我可以看到标记,但我无法真正将它们与 DOM 中的任何内容相关联。我很困惑。
我不知道如何创建与页面上其他元素相关联的智能交互式地图。像 Angular-leaflet 这样的库可以让你很容易地在页面上获取地图,但是定制是痛苦的(或者看起来如此)。 Angular.js 与上述三种工具中的任何一种相结合,是要走的路吗?有什么我完全不明白的地方吗?
-
我几乎想知道我是否应该为我正在尝试做的事情而烦恼 Angular。似乎没有智能的方法来弥合 Angular 和 Leaflet 之间的差距,而且该指令的源代码非常复杂。
-
应该不会太差吧。在将它们添加到 LayerGroup 之前,您是否尝试过将所有标记推入一个数组。当它们在数组中时,您可以很好地引用它们,因此您可以调用诸如 show popup 之类的方法。
-
As for the hovering try this 。如果您有兴趣,我可以挖掘我制作的传单指令,我们可以比较笔记。