单击群集时,如何显示具有标记值的Infowindow?

时间:2015-12-09 09:52:36

标签: javascript angularjs google-maps-api-3 infowindow

我一直在尝试使用带有angularJS的谷歌地图。

我已经学会了如何通过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 个答案:

答案 0 :(得分:1)

回答自己。

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