2015-12-09 6 views
2

Я пытался использовать карту google с angularJS.При нажатии кластера, как отображать Infowindow, который имеет значения маркеров?

Я узнал, как использовать его через https://angular-ui.github.io/angular-google-maps/#!/.

Все идет хорошо.

Для каждого маркера я могу показать InfoWindow, который имеет информацию о элементе myList.

Но я застрял в InfoWindow с кластером.

При щелчке по кластеру я хочу показать список информации о маркерах в кластере. Даже я не могу показать простой InforWindow при нажатии на кластер.

Ниже приведены мои коды. Скажите, пожалуйста, если этого недостаточно для решения моей проблемы.

Пожалуйста, сообщите мне, что не так, и как это решить. Имейте славный день.

* javascript 
$scope.map.map = { 
    center: { latitude: $scope.map.myList[0].lat, longitude: $scope.map.myList[0].lng }, 
    zoom: 17, 
    events : { 
     tilesloaded: function (map) { 
      $scope.$apply(function() { 

       google.maps.event.addDomListener(window, 'resize', function() { 
        var lat = $scope.map.myList[$scope.map.markerPosition-1].lat; 
        var lng = $scope.map.myList[$scope.map.markerPosition-1].lng; 
        var center = new google.maps.LatLng(lat, lng); 
        map.setCenter(center); 
       }); 
      }); 
     } 
    }, 

    markersEvents: { 
     click: function(marker, eventName, model) { 

      model.show = !model.show; 
      return; 
     } 
    }, 
    clusterOptions : { // options of cluster 
     gridSize: 40, 
     ignoreHidden: true, 
     zoomOnClick : false, 
     averageCenter : true, 
     styles: [ 
       { 
        height: 53, 
        url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png", 
        width: 53, 
        textColor : 'white' 
       } 
     ] 
    }, 
    clusterEvent: { // when cluster's clicked 
     click: function(map, markers) { 

      var contentString = 'ABCD'; 

      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      }); 

      infowindow.open(map, markers); 
      return; 
     } 
    } 
}; 
$scope.map.options = { 
    streetViewControl : false 
}; 
$scope.map.markers = []; 





* html 
<ui-gmap-google-map center='map.map.center' zoom="map.map.zoom" options="map.options" events="map.map.events"> 
<ui-gmap-markers models="map.markers" coords="'self'" icon="a" events="map.map.markersEvents" options="'options'" 
     doCluster="true" clusterOptions="map.map.clusterOptions" clusterEvents="map.map.clusterEvent"> 
     <ui-gmap-windows show="show"> 
      <div ng-non-bindable>{{id}}</div> 
     </ui-gmap-windows> 
</ui-gmap-markers> 

ответ

1

Ответ себя.

var infoWindowOptions = { 
     content: "asdfasdf" 
}; 
var infowindow = new google.maps.InfoWindow(infoWindowOptions); 
infowindow.open(map.map_, *marker*);