使用InfoWindows進行Javascript Google Maps Marker群集 - 可能嗎？

Question

我已經研究了如何使用Marker Clusterer制作谷歌地圖，它的工作方式與我想要的一樣。

所以，我接下來繼續嘗試找出如何將InfoWindows添加到標記中，但我已陷入困境。

我嘗試過，infowindow信息始終是markers.txt文件中最后一項的詳細信息。 即“浴缸 - 拜倫路122號，CHELMSFORD，CM2 6HJ”

我認為這與在循環內創建標記有關。 但我無法弄清楚如何做到這一點。 我正在關注這篇文章並沒有說它不起作用。

使用MarkerClusterer的Marker上的InfoWindow

我已經提出了我迄今為止的工作演示，所以你可以在這里看到我的意思：

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中使用來自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 個解決方案

解決方案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