集群器 谷歌地图

Question

我知道markerClusterer能够处理谷歌地图上的大量标记。 通过参考这个示例代码，如下所示

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript" src="../src/data.json"></script>
    <script type="text/javascript">
      var script = '<script type="text/javascript" src="../src/markerclusterer';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '_compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>

    <script type="text/javascript">
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

第一个问题，为什么这个示例 infowindow 无法工作？

其次，如果我有这样的数组：

[-6.358851,106.889359] => Array
        (
            [0] => stdClass Object
                (
                    [name] => C
                )

        )

    [-6.154060,106.854080] => Array
        (
            [0] => stdClass Object
                (                        
                    [name] => A
                )

            [1] => stdClass Object
                (
                    [name] => B
                )

        )

我可以像那些具有相同纬度和经度的数组一样，将信息堆叠在一个信息窗口中吗？我知道可能是这样。我只是想知道该怎么做。 json数据格式如何才能在地图上获得正确的输出？

希望这里的任何人都可以帮助我。提前致谢。

Answer 1

第一个问题；什么信息窗口？您的代码中没有信息窗口。您需要做的是在循环内，为每个标记创建一个 infowindow 变量，设置其内容，并为该标记创建一个事件侦听器。

<script type="text/javascript">
    var map;

    function initialize() {
        var homeLatlng = new google.maps.LatLng(51.476706,0); // London
        var homeLat = 51.476706;
        var homeLng = 0;

        var myOptions = {
            zoom: 5,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        for (var i = 0; i < 100; i++) {
            var latLng = new google.maps.LatLng(homeLat, homeLng+i);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });

            setContent(marker, i);
        }
    }

    function setContent(marker, i) {
        var infowindow =  new google.maps.InfoWindow({
            content: 'clicked marker ' + (i+1)
        });

        google.maps.event.addListener(marker, 'click', function(event) {
           infowindow.open(map, marker);
        });
    }


    google.maps.event.addDomListener(window, 'load', initialize);
</script>