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

首先，我尝试使用Angular.js创建类似的内容：

总之，以下是我尝试过的工具：

• Mapbox.js
• 传单.js
• 角传单指令

对于每一项，我都尝试创建一个指令，该指令将管理与显示这些位置的地图关联的位置列表，这样，当用户悬停在列表项上时，工具提示将显示在地图上位置标记的上方，当用户悬停在地图上位置标记的上方时，工具提示将显示在该标记的上方。（如果不清楚，请访问上面的链接。）超链接、图像等应该能够显示在工具提示中。以上这些似乎都没有给我这个功能的映射部分。此外，为了让标记出现在地图上，我必须从本质上摆脱惯用的角度，因为标记是通过传单/地图盒工具包生成的向量项。写这段代码感觉不对。是的，我可以看到标记，但我不能真正将它们与DOM中的任何内容相关联。我很困惑

---

我不知道如何创建一个与页面上的其他元素关联的智能交互式地图。像Angular传单这样的库可以让您非常容易地在页面上获取地图，但定制是痛苦的（或者看起来是痛苦的）。Angular.js与上述三种工具中的任何一种结合使用，是一种可行的方法吗？有什么我只是不明白的吗？

在angular传单指令中，您可以绑定

标记事件。
下面是一个实现dragend事件的示例（取自）。您应该能够使用
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;
  });

} ]);

是的，我也曾与AngularJS和传单指令合作过，有时会有点痛苦。没有内置的方法可以做到这一点。有几个线程，所以处理类似的主题和。他们实际上在做的是构建一个索引数组，允许你用数组将地图标记映射到一个数字。我几乎想知道我是否应该为我试图做的事情而费心使用Angular。似乎没有智能的方法来弥合角度和传单之间的差距，该指令的源代码极其复杂，应该不会太糟糕。在将所有标记添加到图层组之前，是否已尝试将其推入数组中。当它们在数组中时，您可以对它们进行漂亮的引用，这样您就可以调用show popup之类的方法。。如果你感兴趣的话，我可以翻出我制作的说明书，我们可以比较笔记。我很好奇——你为什么要使用angular.extend（$scope…）；而不是直接给$scope赋值？@Michel P:我也不知道，所以我。正常情况下似乎并没有什么区别，但在有棱角的传单中，似乎确实可以。不确定