1

首先，我正在尝试使用 Angular.js 创建类似的东西：https ://foursquare.com/explore?mode=url&near=San%20Francisco%2C%20CA&q=comedy

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

  • Mapbox.js
  • Leaflet.js
  • Angular-Leaflet 指令

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

我不知道如何创建与页面上其他元素相关联的智能交互式地图。像 Angular-leaflet 这样的库可以让你很容易地在页面上获取地图，但定制是痛苦的（或者看起来如此）。Angular.js 与上述三种工具中的任何一种相结合，是要走的路吗？有什么我无法理解的吗？

4

1 回答 1

0

在 angular-leaflet-directive 中，您可以绑定marker events. 这是一个实现 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;
  });

} ]);
于 2015-04-23T08:34:47.100 回答