谷歌地图clusterer没有标记

我想用谷歌地图api v3使用markerclusterplus.js。我通过一系列地址对每个地址进行地理编码并添加一个标记和信息窗口。我推标记到一个数组称为标记和使用下面的代码将这些添加到我的集群谷歌地图clusterer没有标记

var markerCluster = new MarkerClusterer(map, markers);

没有聚集的标记显示出来。代码的其余部分的作品，如果我添加

map: map

我的标志，他们显示为标准的标志，所以这是不是一切正常。当提醒使用标记阵列时

alert(markers.toString())

没有任何东西会被返回，所以可能没有东西被推到数组中？

下面

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;ver=3.5.1"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script> 

</head> 

<body> 

<script type="text/javascript"> 
var map; //Map variable 
var geocoder; //Geocoder variable 
var infowindow; 
//var marker; //Marker variable 
//Options variable 
var myOptions = { 
       zoom: 2, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       disableDefaultUI: true, 
      }; 
var LatLngList = []; 

//Geocoder function 
function myGeocode() { 

    infowindow = new google.maps.InfoWindow({ 
     maxWidth: 200 
    }); 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    geocoder = new google.maps.Geocoder(); 
    var titles = ['Anne of Cleves House', 
     'Lewes Castle', 
     'Michelham Priory', 
     'Fishbourne Roman Palace & Gardens', 
     'Marlipins Museum','The Priest House', 
     'The Long Man' 
     ]; 

    var addresses =[ 
     'Anne of Cleves House, 52, Southover High St, Lewes, BN7 1JA', 
     'Barbican House Museum, 169, High Street, Lewes, BN7 1YE', 
     'Michelham Priory, Upper Dicker, Hailsham, East Sussex, BN27 3QS', 
     'Fishbourne Roman Palace, Roman Way, Fishbourne, West Sussex, PO19 3QR', 
     'Marlipins Museum, High Street, Shoreham-by-Sea, West Sussex, BN43 5DA', 
     'The Priest House, North Lane, West Hoathly, West Sussex, RH19 4PP', 
     'The long man of wilmington' 
    ]; 

    var descriptions = [ 
     'Anne of Cleves House you can explore how the Tudors and Elizabethans lived, worked and relaxed at home.', 
     'Climb to the top of this 1000 year old Norman Castle for stunning panoramic views across Sussex.', 
     'England\'s longest water filled moat surrounds the site which dates back to 1229.', 
     'Welcome to the largest Roman home in Britain', 
     'The striking chequerboard flint and Caen limestone facade is part of one of the oldest Norman buildings in Sussex.', 
     'The only one of its kind open to the public, this beautiful 15th century Wealden hall house stands in a traditional cottage garden.', 
     'the long man of wilmington' 
    ]; 

    for (var i = 0; i < addresses.length; i++) { 

     var address = addresses[i]; 
     var title = titles[i]; 
     var description = descriptions[i]; 
     //var alink = links[i]; 
     var markers = []; 
     var marker; 

     (function(address, title, description) { 

      geocoder.geocode({"address": address }, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 

        latlng = results[0].geometry.location; 
        LatLngList.push(latlng); 

        map.setCenter(latlng); 

        marker = new google.maps.Marker({ 
         position: latlng 
         //map: map, 
         //title: title, 
        }); 

        markers.push(marker); 

        google.maps.event.addListener(marker, "click", function() { 
         infowindow.setContent("<div class='map-infowindow'><h4 class='gm-title'>"+title+"</h4>"+description+"'<a class='gm-directions' href='http://maps.google.com/maps?saddr="+address+"'>Get directions</a></div>"); 
        infowindow.open(map, marker); 
        }); 

       } 
       else { 
        document.getElementById("text_status").value = status; 
       } 

      });//end of geocoder 
     })(address, title, description); // <- Call function, pass the vars to be captured 
    }//end of for loop 

    alert(markers.toString()) 
    var markerCluster = new MarkerClusterer(map, markers); 

    // Create a new viewpoint bound 
    var bounds = new google.maps.LatLngBounds(); 
    // Go through each... 
    for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) { 
     // And increase the bounds to take this point 
     bounds.extend (LatLngList[i]); 
    } 
    // Fit these bounds to the map 
    map.fitBounds (bounds); 

    //alert(LatLngList.join('\n')) 
} 

window.onload=myGeocode; 
</script> 

<div id="map_canvas" style="width:600px; height:600px;"></div> 

</body> 

</html>

来源

2013-04-15 phantomdentist

您的JavaScript的一些错误。建议你通过类似jslint的方式运行它 – duncan

第一全代码，你正在重新定义循环内的各时间标记阵列，必须有循环的外部定义的标记阵列。

其次，geocoder.geocode异步工作，所以地理编码实际上并没有完成，直到循环结束后，甚至更晚的时候你的alert（）调用。

第三，不必在循环中使用闭包，因为您每次都通过循环重新定义函数。在这种情况下，我总是喜欢在当前函数中添加一个私有方法。那么执行地理编码调用的函数只能定义一次，并根据需要调用。现在我们所需要做的就是观察（从地理编码器的回调函数中）标记数组的长度，直到它与地址数组的长度相同，然后我们知道所有的地理编码已经完成（假设当然一切正常），时间完成的东西：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;ver=3.5.1"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
var map; //Map variable 
var geocoder; //Geocoder variable 
var infowindow; 
//var marker; //Marker variable 
//Options variable 
var myOptions = { 
       zoom: 2, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       disableDefaultUI: true, 
      }; 
var LatLngList = []; 

//Geocoder function 
function myGeocode() { 
    infowindow = new google.maps.InfoWindow({ 
     maxWidth: 200 
    }); 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    geocoder = new google.maps.Geocoder(); 
    var titles = [ 
     'Anne of Cleves House', 
     'Lewes Castle', 
     'Michelham Priory', 
     'Fishbourne Roman Palace & Gardens', 
     'Marlipins Museum','The Priest House', 
     'The Long Man' 
     ]; 

    var addresses =[ 
     'Anne of Cleves House, 52, Southover High St, Lewes, BN7 1JA', 
     'Barbican House Museum, 169, High Street, Lewes, BN7 1YE', 
     'Michelham Priory, Upper Dicker, Hailsham, East Sussex, BN27 3QS', 
     'Fishbourne Roman Palace, Roman Way, Fishbourne, West Sussex, PO19 3QR', 
     'Marlipins Museum, High Street, Shoreham-by-Sea, West Sussex, BN43 5DA', 
     'The Priest House, North Lane, West Hoathly, West Sussex, RH19 4PP', 
     'The long man of wilmington' 
    ]; 

    var descriptions = [ 
     'Anne of Cleves House you can explore how the Tudors and Elizabethans lived, worked and relaxed at home.', 
     'Climb to the top of this 1000 year old Norman Castle for stunning panoramic views across Sussex.', 
     'England\'s longest water filled moat surrounds the site which dates back to 1229.', 
     'Welcome to the largest Roman home in Britain', 
     'The striking chequerboard flint and Caen limestone facade is part of one of the oldest Norman buildings in Sussex.', 
     'The only one of its kind open to the public, this beautiful 15th century Wealden hall house stands in a traditional cottage garden.', 
     'the long man of wilmington' 
    ]; 
    var markers = []; 
    //private function, only need be defined once! 
    function getGeocode(address, title, description) { 
     geocoder.geocode({"address": address }, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       latlng = results[0].geometry.location; 
       LatLngList.push(latlng); 
       map.setCenter(latlng); 
       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map 
        //title: title, 
       }); 
       markers.push(marker); 
       google.maps.event.addListener(marker, "click", function() { 
        infowindow.setContent("<div class='map-infowindow'><h4 class='gm-title'>"+title+"</h4>"+description+"'<a class='gm-directions' href='http://maps.google.com/maps?saddr="+address+"'>Get directions</a></div>"); 
        infowindow.open(map, marker); 
       }); 
       if (markers.length == addresses.length) { //we have received all of our geocoder responses 
        alert(markers); 
        var markerCluster = new MarkerClusterer(map, markers); 
        // Create a new viewpoint bound 
        var bounds = new google.maps.LatLngBounds(); 
        // Go through each... 
        for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) { 
         // And increase the bounds to take this point 
         bounds.extend (LatLngList[i]); 
        } 
        // Fit these bounds to the map 
        map.fitBounds (bounds); 
       } 
      } else { 
       document.getElementById("text_status").value = status; 
      } 
     });//end of geocoder 
    } 
    for (var i = 0; i < addresses.length; i++) { 
     var address = addresses[i]; 
     var title = titles[i]; 
     var description = descriptions[i]; 
     //var alink = links[i]; 
     //put our private function to work: 
     getGeocode(address, title, description); 
    }//end of for loop 
} 

window.onload=myGeocode; 
</script> 
<div id="map_canvas" style="width:600px; height:600px;"></div> 
</body> 
</html>

来源

2013-04-15 12:53:11 astupidname

谷歌地图clusterer没有标记

回答

相关问题