Question

放大后与群集分离的标记并不总是触发点击事件。

这是我一直在使用的代码：

<html>
<head>
    <style>
        #map {
            width: 500px;
            height: 400px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZWqW7aJrwxQ4MeN10zXxap5a3lHl4iAI&sensor=true"></script>
    <script src="https://google-maps-utility-library-v3.googlecode.com/svn-history/r354/trunk/markerclustererplus/src/markerclusterer_packed.js"></script>
    <script>
        jQuery(document).ready(function () {
            var map;
            var locations = [
                {
                    'lat': 51.3333,
                    'lng': 3.2833
                },
                {
                    'lat': 51.209348,
                    'lng': 3.2246995000000425
                },
                {
                    'lat': 51.209348,
                    'lng': 3.2246995000000425
                },
                {
                    'lat': 51.2070168,
                    'lng': 3.222604400000023
                }
            ];
            var centerPosition = new google.maps.LatLng(50.944282, 3.647766);
            var markers = [];

            var options = {
                zoom: 5,
                center: centerPosition,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map($('#map')[0], options);

            for (loc in locations) {
                var latLng = new google.maps.LatLng(locations[loc].lat, locations[loc].lng);
                var marker = new google.maps.Marker({
                    position: latLng
                });
                markers.push(marker);
            }
            var markerCluster = new MarkerClusterer(map, markers, {
                averageCenter: true
            });

            google.maps.event.addListener(markerCluster, "click", function (cluster) {
                console.log("Cluster click");
            });

            google.maps.event.addListener(marker, "click", function (cluster) {
                console.log("Marker click");
            });

        });
    </script>
</head>
<body>
<div id="map">

</div>
</body>
</html>

现在单击群集（包含4个标记）。地图将被放大，您现在将看到一个3和一个标记的集群。单击单个标记不会执行任何操作（事件未触发）。

但是！

单击3的簇，地图将进一步放大。现在有一个2的簇，再一个分离的标记。点击该标记将触发点击事件。

这是一个错误，还是我的设置有问题？

你可以找到jsfiddle here。

Answer 1

您创建了标记事件侦听器

        google.maps.event.addListener(marker, "click", function (cluster) {
            console.log("Marker click");
        });

在for循环之外。因此，创建的最后一个标记具有事件侦听器，其他标记为

这应该有效：

        for (loc in locations) {
            var latLng = new google.maps.LatLng(locations[loc].lat, locations[loc].lng);
            var marker = new google.maps.Marker({
                position: latLng
            });
            markers.push(marker);

            google.maps.event.addListener(marker, "click", function (cluster) {
                console.log("Marker click");
            });
        }

从群集分离的标记不会触发MarkerClustererPlus中的单击事件

1 个答案: