Question

我已经研究过如何使用Marker Clusterer创建一个谷歌地图，它可以按照我想要的方式工作。

所以，我接下来试着找出如何将InfoWindows添加到标记中，但我已陷入困境。

我尝试过，infowindow信息始终是markers.txt文件中最后一项的详细信息。即“浴缸 - 拜伦路122号，CHELMSFORD，CM2 6HJ”

我认为这与在循环内创建标记有关。但我无法弄清楚如何做到这一点。我正在关注这篇文章，并没有说它不起作用。

InfoWindow on Marker using MarkerClusterer

我已经提供了我迄今为止的工作演示，所以你可以在这里看到我的意思：

http://googlemap.azurewebsites.net/2clustermapwithinfowindows.html

这是我的代码：

非常感谢任何帮助！

<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerClusterer v3 Example</title>

<style type="text/css">

    #map {
        width: 100%;
        height: 100%;
    }
</style>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/markers.txt"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>

<script type="text/javascript">

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

    function initialize() {
        var center = new google.maps.LatLng(54,-2);

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: center,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var stack = [];
        var markers = [];
        for (var i = 0; i < data.count; i++) {
            var dataPhoto = data.clustermarker[i];
            // obtain the attribues of each marker
            var lat = dataPhoto.latitude;
            var lng = dataPhoto.longitude;
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: map,
                title: "This is a marker"
            });
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent("<div id='pano' style='width: 400px; height: 400px;'></div><div>" + dataPhoto.businessname + "</div>" + "<div>" + dataPhoto.fulladdress + "</div>");
                    infowindow.open(map, marker);
                }
            })(marker, i));
            stack.push(marker);
        }
        var mc = new MarkerClusterer(map, stack);

    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
</body>
</html>

Answer 1

我不确定，但我认为这是因为您在事件监听器中使用来自dataPhoto的数据（当您的事件被触发时，它将具有最后一个元素的值）。

您可以尝试将其他数据存储在标记中，并在收听者中重复使用，如下所示：

var stack = [];
var markers = [];
for (var i = 0; i < data.count; i++) {
    var dataPhoto = data.clustermarker[i];
    // obtain the attribues of each marker
    var lat = dataPhoto.latitude;
    var lng = dataPhoto.longitude;
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
        title: "This is a marker",
        businessname: dataPhoto.businessname,
        fulladdress: dataPhoto.fulladdress
    });
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent("<div id='pano' style='width: 400px; height: 400px;'></div><div>" + marker.businessname + "</div>" + "<div>" + marker.fulladdress + "</div>");
            infowindow.open(map, marker);
        }
    })(marker, i));
    stack.push(marker);
}

使用InfoWindows进行Javascript Google Maps Marker群集 - 可能吗？

1 个答案: