2

クライアント プロジェクトの 1 つで ngMap ( http://ngmap.github.io/ ) を使用していますが、この「ディレクティブ」に問題があります: マーカー クラスターとマップを次のように使用する方法:

<div ng-controller="MyCtrl">
      <map center="41,-87" zoom="3">

        <info-window id="foo2">
          <div ng-non-bindable="">
            Lat/Lng: {{this.getPosition()}}<br/>
            <ul>
              <li ng-repeat='item in store.items'>{{item}}</li>
            </ul>
          </div>
        </info-window>

        <marker ng-repeat="(id, store) in stores" id="{{id}}"
          position="{{store.position}}"
          on-click="showStore(event, id)"
        ></marker>
      </map>
    </div>

サンプル ページとコードを検索しましたが、私の状況でマーカー クラスターを使用する方法に関するドキュメントはありません。

誰かがこの ngmap を使用していますか? または、Google マップの angularjs ディレクティブを変更する必要がありますか?

ありがとう。

4

1 に答える 1

10

MarkerClusterer は、Google Maps JavaScript API v3 用の個別のライブラリです。ここでは、 ng-mapでMarkerClustererを利用する方法を示す実際の例を示します。

angular.module('mapApp', ['ngMap'])
    .controller('mapController', function ($scope, NgMap) {

        NgMap.getMap().then(function (map) {
            $scope.map = map;
            $scope.initMarkerClusterer();
        });

        $scope.cities = [
            { id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
            { id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
            { id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
            { id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
            { id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
        ];
        


        $scope.initMarkerClusterer = function () {
            var markers = $scope.cities.map(function (city) {
                return $scope.createMarkerForCity(city);
            });
            var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
            return new MarkerClusterer($scope.map, markers, mcOptions);
        };


        $scope.createMarkerForCity = function (city) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(city.pos[0], city.pos[1]),
                title: city.name
            });
            google.maps.event.addListener(marker, 'click', function () {
                $scope.selectedCity = city;
                $scope.map.showInfoWindow('myInfoWindow', this);
            });
            return marker;
        }

    });
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
    <script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
        <ng-map default-style="true" zoom="3" center="59.339025, 18.065818">
            <info-window id="myInfoWindow">
                <div ng-non-bindable>
                    <h4>{{selectedCity.name}}</h4>
                </div>
            </info-window>
        </ng-map>
    </div>

于 2016-08-29T13:30:38.510 に答える