创建一个智能的交互式地图，就像 FourSquare 网站上使用的那样

【问题标题】：Create a smart, interactive map like the ones used on the FourSquare site创建一个智能的交互式地图，就像 FourSquare 网站上使用的那样
【发布时间】：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 与上述三种工具中的任何一种相结合，是要走的路吗？有什么我完全不明白的地方吗？

是的，我也使用过 AngularJS 和 Leaflet-Directive，有时会有点痛苦。没有内置的方法可以做到这一点。 SO上有一些线程处理类似的主题 here 和 here 。他们本质上是在构建一个索引数组，允许您将地图标记映射到带有数组的数字。
我几乎想知道我是否应该为我正在尝试做的事情而烦恼 Angular。似乎没有智能的方法来弥合 Angular 和 Leaflet 之间的差距，而且该指令的源代码非常复杂。
应该不会太差吧。在将它们添加到 LayerGroup 之前，您是否尝试过将所有标记推入一个数组。当它们在数组中时，您可以很好地引用它们，因此您可以调用诸如 show popup 之类的方法。
As for the hovering try this 。如果您有兴趣，我可以挖掘我制作的传单指令，我们可以比较笔记。

【解决方案1】：

在angular-leaflet-directive中，可以绑定 marker events 。这是一个实现 dragend 事件的示例（取自 here ）。您应该能够使用 mouseover 事件，从事件参数中获取悬停标记并显示它的弹出窗口。

var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller('MarkersSimpleController', [ '$scope', function($scope) {
  var mainMarker = {
    lat: 51,
    lng: 0,
    focus: true,
    message: "Hey, drag me if you want",
      draggable: true
  };

  angular.extend($scope, {
    london: {
      lat: 51.505,
      lng: -0.09,
      zoom: 8
    },
    markers: {
      mainMarker: angular.copy(mainMarker)
    },
    position: {
      lat: 51,
      lng: 0
    },
    events: {
      markers: [ 'dragend' ]
    }
  });

  $scope.$on("leafletDirectiveMarker.dragend", function(event, args){
    $scope.position.lat = args.model.lat;
    $scope.position.lng = args.model.lng;
  });

} ]);

【讨论】：

我很好奇——你为什么使用 angular.extend($scope ...);而不是直接给 $scope 赋值？
@Michel P.：我也不知道，所以我 asked 。通常似乎没有任何区别，尽管在 angular-leaflet 中，它似乎实际上可以。不确定

分享于2023年03月15日 angular-leaflet-directive angularjs javascript leaflet mapbox 问答