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

Question

I have worked out how to make a google map using Marker Clusterer and it works just the way I want. 我已经研究了如何使用Marker Clusterer制作谷歌地图，它的工作方式与我想要的一样。

So, I next moved on to try and work out how to add InfoWindows to markers but I have got myself in a muddle. 所以，我接下来继续尝试找出如何将InfoWindows添加到标记中，但我已陷入困境。

What ever I try, the infowindow information is always the details of the last item in the markers.txt file. 我尝试过，infowindow信息始终是markers.txt文件中最后一项的详细信息。 ie "Bathtub - 122 Byron Road, CHELMSFORD, CM2 6HJ" 即“浴缸 - 拜伦路122号，CHELMSFORD，CM2 6HJ”

I think it's to do with creating the markers inside the loop. 我认为这与在循环内创建标记有关。 But I cannot work out how else to do it. 但我无法弄清楚如何做到这一点。 I was following this post which didn't say that it didn't work. 我正在关注这篇文章并没有说它不起作用。

InfoWindow on Marker using MarkerClusterer 使用MarkerClusterer的Marker上的InfoWindow

I have put up a demo of my work to date so you can see what I mean here: 我已经提出了我迄今为止的工作演示，所以你可以在这里看到我的意思：

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

and this is my code: 这是我的代码：

any help would be very much appreciated! 任何帮助将非常感谢！

<!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

I'm not sure, but I think it's because you use data from dataPhoto in your event listener (which will have the value of the last element when your event is fired). 我不确定，但我认为这是因为你在事件监听dataPhoto中使用来自dataPhoto数据（当你的事件被触发时，它将具有最后一个元素的值）。

You can try to store your additional data in your marker and reuse it in your listener like this : 您可以尝试将其他数据存储在标记中，并在监听器中重复使用，如下所示：

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 个解决方案

解决方案1
4 已采纳 2013-12-04 15:24:14

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2013-12-04 15:24:14

解决方案1
4 已采纳 2013-12-04 15:24:14