angularjs: ngmap и кластерный маркерные

в одном из моего клиента проекта я использую ngMap (http://ngmap.github.io/), но у меня есть проблемы с этим «директивы»: как пользователь маркера кластера и карту, как это:angularjs: ngmap и кластерный маркерные

<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 map angularjs?

Спасибо.

источник

2015-05-14 ZioBudda

Вы можете проверить [* * this **] (http://stackoverflow.com/questions/20919127/any-documentation-on-angular-google-maps-clustering-options) вне или библиотека угловой карты с маркерным кластером [** пример ** ] (https://github.com/allenhwkim/angularjs-google-maps/ blob/master/testapp/marker-clusterer.html) –

Привет, я знаю страницу примера, но на этой странице нет встроенного и infowindow (в директиве ngMap) внутри вне контроллера. В этом примере все сделано внутри контроллера. Спасибо, однако, – ZioBudda

@ ZioBudda вы решаете свою проблему. У меня с вами очень похожая проблема – zi0408

MarkerClusterer является отдельной библиотеки для API v3 Google Maps JavaScript, здесь рабочий пример, который демонстрирует, как использовать 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> 
 
     </ng-map> 
 
    </div>

источник

2016-08-29 13:30:38

angularjs: ngmap и кластерный маркерные

ответ

Смежные вопросы