谷歌地图上多个标记的信息窗口不起作用 - angularjs

Question

我正在尝试实现这样的功能：http://www.geocodezip.com/SO_OverQueryLimitC.html

但是，我没有设法在上面显示 InfoWindow。 我想向 InfoWindow 显示具有多个确切位置的数据。

这是我的代码：

1. html:

   <section id="GoogleMaps" ng-controller="MapsController">
     <div class="container">
       <div>
          <div id="map_canvas"></div>
       </div>
     </div>
   </section>
   

2. 控制器：

   .controller('MapsController', ['$scope', '$http', function ($scope, $http) {
   $scope.loadData = function () {
    var url = 'data/LatLng.json';
    return $http.get(url).then(function (response) {
        return response.data;
    });
   };
   
   
   $scope.initMap = function (data) {
    var mapOptions = {
        zoom: 7,
        center: new google.maps.LatLng(3.9443, 101.6954),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    var infowindow = new google.maps.InfoWindow();
   
    var markers = [];
    var LatLng;
    var text;
    var marker;
    data.forEach(function (item) {
   
        var icons;
        LatLng = new google.maps.LatLng(item.LAT, item.LON);
        text = item.TYPE1;
   
        if (item.TYPE1 == '1' && item.TYPE2 == '1') {
            icons = 'http://www.googlemapsmarkers.com/v1/' + '1' + '/FD7567';
        }
        else if (item.TYPE1 == '1' && item.TYPE2 == '2') {
            icons = 'http://www.googlemapsmarkers.com/v1/' + '2' + '/FD7567';
        }
        else if (item.TYPE1 == '1' && item.TYPE2 == '3') {
            icons = 'http://www.googlemapsmarkers.com/v1/' + '3' + '/FD7567';
        }
        else if (item.TYPE1 == '2' && item.TYPE2 == '1') {
            icons = 'http://www.googlemapsmarkers.com/v1/' + '1' + '/6991FD';
        }
        else if (item.TYPE1 == '2' && item.TYPE2 == '2') {
            icons = 'http://www.googlemapsmarkers.com/v1/' + '2' + '/6991FD';
        }
        else {
            icons = 'http://www.googlemapsmarkers.com/v1/' + '3' + '/6991FD';
        }
   
        marker = new google.maps.Marker({
            position: LatLng,
            icon: icons,
            clickable: true,
        });
   
        markers.push(marker);
    });
   
    var options = {
        imagePath: 'images/m'
    };
   
    var markerCluster = new MarkerClusterer(map, markers, options);
   
    ///get array of markers currently in cluster
    var allMarkers = markerCluster.getMarkers();
   
    //check to see if any of the existing markers match the latlng of the new marker
    if (allMarkers.length != 0) {
        for (var i = 0; i < allMarkers.length; i++) {
            var existingMarker = allMarkers[i];
            var pos = existingMarker.getPosition();
   
            if (LatLng.equals(pos)) {
   
                text = text + " & " + text;
            }
        }
    }
   
    google.maps.event.addListener(marker, 'click', function () {
        console.log('hi'); //return nothing
        infowindow.close();
        infowindow.setContent(text);
        infowindow.open(map, marker);
    });
   
    markerCluster.addMarker(marker);
    return marker;
   
    };
   
   
    $scope.loadData()
    .then($scope.initMap);
   
    }])
   

3. 脚本：

   addTag('script', { src: 'http://maps.googleapis.com/maps/api/js' }, sync);
   addTag('script', { src: 'assets/js/markerclusterer.js' }, sync);
   

更新：我尝试在 click 事件中添加 console.log()，但它什么也没显示。当我点击时，它没有进入该功能。

有什么办法解决吗？

谢谢。

Answer 1

为了在单击MarkerClusterer 后显示信息窗口，需要应用以下更改：

1) 将zoomOnClick 设置为false 以禁用默认 点击处理程序：

var options = {
 zoomOnClick: false
};

2) 为MarkerClusterer 对象注册自定义 click 事件处理程序：

 google.maps.event.addListener(markerCluster, "click", function (mCluster) {
     infowindow.setContent("<h2>Some content goes here...</h2>");
     infowindow.setPosition(mCluster.getCenter());
     infowindow.open(map);
 });

例子

更新：已更新以演示如何处理标记 click 事件

angular.module('MapsApp', [])
    .controller('MapsController', ['$scope', '$http', function ($scope, $http) {
        $scope.loadData = function () {
            var url = 'https://gist.githubusercontent.com/vgrem/2bea7539ff81168adf2a0bb8056972c3/raw/LatLng.json';
            return $http.get(url).then(function (response) {
                return response.data;
            });
        };

        var createMarker = function (map, pos,infowindow,content) {
            var marker = new google.maps.Marker({
                position: pos,
                map: map
            });
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.close();
                infowindow.setContent(content);
                infowindow.open(map, marker);
            });
            return marker;
        }


        $scope.initMap = function (data) {
            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(39.8282, -98.5795),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
            var infowindow = new google.maps.InfoWindow();


            var markers = data.map(function (value,idx) {
                var coords = value.split(",");
                var latlng = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
                return createMarker(map, latlng,infowindow,'Info for marker ' + idx );
            });

            var options = {
                imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m',
                //zoomOnClick: false
            };
            var markerCluster = new MarkerClusterer(map, markers, options);

            /*google.maps.event.addListener(markerCluster, "click", function (mCluster) {
                infowindow.setContent("<h2>Some content goes here...</h2>");
                infowindow.setPosition(mCluster.getCenter());
                infowindow.open(map);
            });*/


        };


        $scope.loadData()
            .then($scope.initMap);

    }]);

#map_canvas {
            height: 420px;
            width: 100%;
            margin: 0;
            padding: 0;
        }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
    <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script> 

<section ng-app="MapsApp" ng-controller="MapsController">
        <div class="container">
            <div>
                <div id="map_canvas"></div>
            </div>
        </div>
</section>