使用 InfoWindows 的 Javascript Google map 标记聚类

使用 InfoWindows 的 Javascript Google map 标记聚类 - 可能吗？

转载作者：行者123 更新时间：2023-11-29 17:13:03

我已经弄清楚如何使用 Marker Clusterer 制作 google map ，它的工作方式正是我想要的。

因此，我接下来继续尝试研究如何将 InfoWindows 添加到标记，但我陷入了困境。

无论我怎么尝试，信息窗口信息始终是 markers.txt 文件中最后一项的详细信息。即“浴缸 - 122 Byron Road, 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>

最佳答案

我不确定，但我认为这是因为您在事件监听器中使用了来自 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 map 标记聚类 - 可能吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20378918/

文章推荐： javascript - 有没有办法将 javascript 对象视为 JSON？

文章推荐： javascript - 使用 jQuery 将列表中的元素集包装在 DIV 中

文章推荐： javascript - kendo ui treeview dragend 获取节点id

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

使用 InfoWindows 的 Javascript Google map 标记聚类 - 可能吗？