谷歌地图标记聚类的数组

Question

I know there are a bunch of questions on this subject already - but I have read many of them but can't seem to get anything working in my particular case. 我知道已经有很多关于此主题的问题-但我已经阅读了许多问题，但在我的特定情况下似乎无法解决任何问题。 I want to make a map with a bunch of custom markers with info windows showing store locations across Australia (<-- this part i have working)... When zoomed out the markers should group by city with a number shown... also I would like a html list of links that when clicked zoom to an particular marker on the map. 我想用一堆自定义标记制作地图，并在信息窗口中显示澳大利亚各地的商店位置（<-我正在工作的这部分）...缩小显示时，标记应按城市分组并显示一个数字...也我想要一个链接的HTML列表，单击该链接可放大地图上的特定标记。 Much like the example shown here: https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/examples/speed_test_example.html 类似于此处显示的示例： https : //google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/examples/speed_test_example.html

Below is my code (at the moment I have just added locations in 2 cities as example, later to have many cities nationwide): 以下是我的代码（目前，我刚刚添加了两个城市的位置作为示例，后来又在全国范围内添加了许多城市）：

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

So in summary, I need help with getting the clustering working and html links... 因此，总而言之，我需要帮助来使群集工作和html链接...

Answer 1

The array "sites" was undefined in your code, I wonder why though... but I'm no expert in javascript... If you move it inside your initialize() function, it works correctly. 数组“ sites”在您的代码中未定义，我想知道为什么...但是我不是javascript专家...如果将其移到initialize()函数中，它将正常工作。

The declaration of the MarkerClusterer doesn't include any markers, which doesn't make sense at all. MarkerClusterer的声明不包含任何标记，这根本没有任何意义。 Based on the examples in here https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html you can see that you need to first declare your markers, then include them in the declaration of the MarkerClusterer. 根据此处https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html中的示例，您可以看到您需要先声明标记，然后再包含它们在MarkerClusterer的声明中。

Also in your setMarkers() function you declare a local variable "sites", this is dangerous as you also have a global one with the same name. 同样在setMarkers()函数中声明一个局部变量“ sites”，这很危险，因为您也有一个具有相同名称的全局变量。 (it's not the case anymore since I moved it within initialize() ) （因为我在initialize()移动了它，所以不再是这种情况）

Finally, I don't know what you intent to do with the infowindow, right now, nothing is displayed, but if you write infowindow.setContent('Hello Marker'); 最后，我不知道您打算对infowindow做什么，现在什么也不显示，但是如果您编写infowindow.setContent('Hello Marker'); instead of "this.html", it will work. 而不是“ this.html”，它将起作用。

You can find a working example of your code here: http://jsfiddle.net/839dV/ 您可以在这里找到代码的有效示例： http : //jsfiddle.net/839dV/

谷歌地图标记聚类的数组

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-05-11 08:00:08

谷歌地图标记聚类的数组

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-05-11 08:00:08

解决方案1
2 已采纳 2014-05-11 08:00:08