Модуль NgMap и функция MarkerClusterer

Question

У меня есть данные из внешнего API, и я хочу группировать маркеры в своем GoogleMap. Я использую NgMap директивы:

ng-map center="[21.18, 27.71]" style='margin: 10px 0; height: 500px;' zoom='6' 
     marker position="{{item.latitude}}, {{item.longitude}}" ng-repeat="item in items" 

Так как установить MarkerClusterer в AngularJS (1.5x) контроллер. https://jsfiddle.net/7nqg7f7f/6/ -> Я делаю это таким образом.

Answer 1

ng-map библиотека охватывает Google Maps API, MarkerClusterer наоборот является отдельный библиотека для API v3 Google Maps JavaScript, который не поддерживается ng-map (по крайней мере на данный момент)

В следующем примере показано, как использовать MarkerClusterer с ng-map:

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> 
 
      <!--marker ng-repeat="c in cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showCity(event, c)"> 
 
      </marker--> 
 
     </ng-map> 
 
    </div>

Modified fiddle