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
                )

        )

我可以像那些拥有相同的lat和lon一样，将信息堆叠在一个信息窗口内吗？我知道可能是。我只是想知道该怎么做。 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>

clusterer谷歌地图

1 个答案: