logo标签列表

如何将MakerClusterer与当前的Google Map V3集成？

google-mapsgoogle-maps-api-3google-maps-markersmarkerclusterer
4

我在将MarkerClusterer添加到我的Google地图中遇到了问题（花费了很长时间才走到这一步！！）。如何将两者组合起来？我正在使用api的V3版本。

以下是MarkerClusterer代码：

var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);

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

更新：我尝试将聚类器添加到我的当前代码中，但似乎不起作用。 Places [i] 似乎无法输入聚类器。
3个回答
4
问题出在地理编码方面。进行了很多尝试后解决了：
for (var i = 0; i < address.length; i++) {
    (function(i) {
    geocoder.geocode( {'address': address[i]}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    places[i] = results[0].geometry.location;
    // Adding the markers
    var marker = new google.maps.Marker({position: places[i]});
    markers.push(marker);
    //add the marker to the markerClusterer
    markerCluster.addMarker(marker);
4

您只需要将每个标记添加到一个数组中，然后在添加完所有标记后，创建MarkerClusterer对象即可。

var markers = [];

// Adding a LatLng object for each city  
for (var i = 0; i < marker_data1.length; i++) { 
    (function(i) { 
        geocoder.geocode( {'address': marker_data1[i]}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                places[i] = results[0].geometry.location;

                // Adding the markers 
                var marker = new google.maps.Marker({
                    position: places[i],
                    map: map,
                    title: 'Place number ' + i,
                });

                markers.push(marker);

                // Creating the event listener. It now has access to the values of 
                // i and marker as they were during its creation
                google.maps.event.addListener(marker, 'click', function() {
                    // Check to see if we already have an InfoWindow
                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }

                    // Setting the content of the InfoWindow
                    infowindow.setContent(marker_data[i]);

                    // Tying the InfoWindow to the marker 
                    infowindow.open(map, marker);
                });

                // Extending the bounds object with each LatLng 
                bounds.extend(places[i]); 

                // Adjusting the map to new bounding box 
                map.fitBounds(bounds) 
            } else { 
            alert("Geocode was not successful for the following reason: " + status); 
            } 
        });
    })(i);
} 

var markerCluster = new MarkerClusterer(map, markers);
您没有引用markerclusterer.js文件！请添加以下脚本：http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js - duncan
糟糕！代码已完成，但现在没有绘制任何内容。 - Rob
那么 marker_data1 是什么意思？你没有在任何地方创建它，但是却试图像数组一样循环遍历它。 - duncan
好的，也把它们设置一下（由于复制粘贴而导致错误，没有更改变量）。标记现在正在像以前一样绘制，只需要合并聚类即可。 - Rob
仍然没有运气，似乎没有其他人想要触及这个问题 - 即使有赏金！ - Rob
我在想，你没有很多标记，它们是否不足以聚集在一起？ - duncan
1

好的，这里有一个可行的解决方案。我基本上是剥离了一些东西直到它开始工作。我认为问题可能在于地理编码器。此外，在创建标记时，您在var marker = new google.maps.Marker({position: places[i], map: map,});末尾有一个尾随逗号，这将在IE中引起问题。您会注意到我正在使用坐标而不是地理编码器（我没有经验），但它可能是地理编码器和标记聚合器之间的冲突？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> &laquo; Mediwales Mapping</title>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
  p { font-family: Helvetica;}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>


<script>
function initialize() {

    // Creating an object literal containing the properties we want to pass to the map 
    var options = { 
        zoom: 10, 
        center: new google.maps.LatLng(52.40, -3.61), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Creating the map 
    var map = new google.maps.Map(document.getElementById('map_canvas'), options); 

    // Creating a LatLngBounds object 
    var bounds = new google.maps.LatLngBounds(); 

    // Creating an array that will contain the addresses 
    var places = []; 

    // Creating a variable that will hold the InfoWindow object 
    var infowindow; 

    var popup_content = ["<p>DTR Medical<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/dtr-logo.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/dtr-medical\/\">View profile<\/a>","<p>MediWales<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/index.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/mediwales\/\">View profile<\/a>","<p>Teamworks Design & Marketing<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/Teamworks-Design-Logo.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/teamworks-design-and-marketing\/\">View profile<\/a>","<p>Acuitas Medical<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/acuitas-medical-logo.gif\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/acuitas-medical\/\">View profile<\/a>","<p>Nightingale<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/Nightingale.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/nightingale\/\">View profile<\/a>"];
    var address = ["17 Clarion Court, Llansamlet, Swansea, SA6 8RF","7 Schooner Way, , Cardiff, CF10 4DZ","65 St Brides Rd, Aberkenfig, Bridgend, CF32 9RA","Kings Road, , Swansea, SA1 8PH","Unit 20 Abenbury Way, Wrexham Industrial Estate, Wrexham, LL13 9UG"];
    var geocoder = new google.maps.Geocoder(); 

    var markers = [];
    var places = [
        new google.maps.LatLng(53.077528,-2.978211),
        new google.maps.LatLng(52.83264,-3.906555),
        new google.maps.LatLng(51.508742,-3.259048),
        new google.maps.LatLng(51.467697,-3.208923),
        new google.maps.LatLng(51.628248,-3.923035)
    ];

    // Adding a LatLng object for each city  
    for (var i = 0; i < address.length; i++) { 
        //places[i] = results[0].geometry.location;

        // Adding the markers 
        var marker = new google.maps.Marker({position: places[i], map: map, draggable:true});

        markers.push(marker);

        // Creating the event listener. It now has access to the values of i and marker as they were during its creation
        google.maps.event.addListener(marker, 'click', function() {
            // Check to see if we already have an InfoWindow
            if (!infowindow) {
                infowindow = new google.maps.InfoWindow();
            }

            // Setting the content of the InfoWindow
            infowindow.setContent(popup_content[i]);

            // Tying the InfoWindow to the marker 
            infowindow.open(map, marker);
        });

        // Extending the bounds object with each LatLng 
        bounds.extend(places[i]); 

        // Adjusting the map to new bounding box 
        map.fitBounds(bounds) ;
    } 

    var markerCluster = new MarkerClusterer(map, markers, {
            zoomOnClick: true,
            averageCenter: true
        });
}

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body class="home page page-id-1873 page-parent page-template page-template-page-php">

<div id="map_canvas"></div>

</body></html>
感谢 Duncan 的帮助，你激发了很多想法，但我最终还是解决了它。 - Rob
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接