Question

首先，我正在尝试使用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，结合上述三种工具中的任何一种，可以走的路吗？有什么我只是无法理解吗？

Answer 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;
  });

} ]);

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

1 个答案: