谷歌地圖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沒有標記

回答

相關問題