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 ツールキットを介して生成されるベクター アイテムであるためです。このコードを書くのは間違っていると感じます。はい、マーカーは見えますが、わかりません」それらをDOM内の何かと実際に関連付けないでください。よくわかりません。

ページの他の要素に関連付けられたスマートでインタラクティブなマップを作成する方法がわかりません。Angular-leaflet のようなライブラリを使用すると、ページ上で地図を簡単に取得できますが、カスタマイズは面倒です (またはそう思われます)。Angular.js は、上記の 3 つのツールのいずれかと組み合わせて使用​​できますか? 私が単に理解できていないことはありますか？

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 に答える