谷歌地图标记聚类数组答案

【问题标题】：Google maps marker clustering for array谷歌地图标记聚类数组
【发布时间】：2014-05-11 03:16:07
【问题描述】：

我知道已经有很多关于这个主题的问题 - 但我已经阅读了其中的许多问题，但似乎无法在我的特定情况下得到任何工作。我想用一堆自定义标记制作一张地图，其中包含显示澳大利亚各地商店位置的信息窗口（https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/examples/speed_test_example.html

以下是我的代码（目前我刚刚添加了 2 个城市的位置，例如，以后在全国有很多城市）：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Locations</title>
    <meta charset="utf-8">
    <script src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script type="text/javascript">
var infowindow = null;
    $(document).ready(function () { initialize();  });

    function initialize() {

        var centerMap = new google.maps.LatLng(-25.274398, 133.775136);

        var myOptions = {
            zoom: 4,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var mc = new MarkerClusterer(map);

        setMarkers(map, sites);
        infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });

    }

    var sites = [
    ['location 16', -37.814107 , 144.96328, 6, 'Description in info window','images/map_mobile.png'],
    ['location 5', -37.911394 , 145.189584, 5, 'Description in info window','images/map_store.png'],
    ['location 4', -33.963542 , 151.134273, 4, 'Description in info window','images/map_store.png'],
    ['location 3', -33.923960 , 150.921158, 3, 'Description in info window','images/map_store.png'],
    ['location 2', -34.065619 , 150.796491, 2, 'Description in info window','images/map_mobile.png'],
    ['location 1', -33.752178 , 150.6910478, 1, 'Description in info window','images/map_mobile.png']
];

    function setMarkers(map, markers) {

        for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4],
                icon: sites[5]
            });

            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 620px; height: 600px;"></div>
</body>
</html>

总之，我需要帮助来获得集群工作和 html 链接...

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

您的代码中未定义数组“站点”，我想知道为什么...但我不是 javascript 专家... 如果将它移到 initialize() 函数中，它可以正常工作。

MarkerClusterer 的声明不包含任何标记，这根本没有意义。根据https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html 中的示例，您可以看到您需要首先声明您的标记，然后将它们包含在 MarkerClusterer 的声明中。

同样在你的setMarkers() 函数中你声明了一个局部变量“sites”，这很危险，因为你也有一个同名的全局变量。（现在不是这样了，因为我把它移到initialize() 内）

最后，我不知道你打算用信息窗口做什么，现在什么都没有显示，但如果你写infowindow.setContent('Hello Marker');而不是“this.html”，它会起作用。

您可以在此处找到代码的工作示例：http://jsfiddle.net/839dV/

【讨论】：

非常感谢，你知道我不知道。干得好。
关于在地图下方的同一页面中创建一个列表以跳转到相关地图标记并打开信息窗口的任何想法？有点像这里左边的列表：google-maps-utility-library-v3.googlecode.com/svn/trunk/…
我相信当你点击列表中的一个链接时，它会调用一个带有一些参数（id，positions，...）的javascript函数来识别点击的链接，并且该函数以地图为中心基于相应的标记...无论如何我将如何实现这样的功能。
如果有，我会发给你一个链接，但我没有；）
好的，我想一个人可以提供的帮助是有限度的。无论如何谢谢:)