Google Maps Marker Clusterer無法運作

我有以下代碼嘗試讓MarkerClusterer圖書館爲我的Google地圖工作，但由於某些原因，它不會更改任何內容。我有一些jinja2在那裏爲循環，但是這一切工作正常。你能看到任何錯誤嗎？Google Maps Marker Clusterer無法運作

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <style type="text/css"> 
      html { height: 100% } 
      body { height: 100%; margin: 0; padding: 0 } 
      #map_canvas { height: 100% } 
     </style> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD-pLsocZXv5mYwJsSxMghJncxa6iklFUU&sensor=false"></script> 
     <script type="text/javascript" src="/static/js/markerclusterer.js"></script> 
     <script type="text/javascript"> 

    var map;  

    function initialize() { 

     var centerlocation = {{centerlocation|json_encode|safe}}; 
     var LatLng = centerlocation.replace("(", "").replace(")", "").split(", ") 
     var Lat = parseFloat(LatLng[0]); 
     var Lng = parseFloat(LatLng[1]); 

     var zoomAmt = 10; 


     var USA = new google.maps.LatLng(Lat, Lng); 
     var mapOptions = { 
     zoom: zoomAmt, 
     center: USA, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
     }; 
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

    // Global var 
     var infowindow = new google.maps.InfoWindow(); 

    //markers array 
    var markers = []; 

    //put all the markers on the map 
    {% for location in locations %} 

    //need to do the JSON encoding because JavaScript can't have Jinja2 variables 
    //I need the safe here because Jinja2 tries to escape the characters otherwise 
    var GPSlocation = {{location.GPSlocation|json_encode|safe}};  
    var LatLng = GPSlocation.replace("(", "").replace(")", "").split(", ") 
    var Lat = parseFloat(LatLng[0]); 
    var Lng = parseFloat(LatLng[1]);  

    var markerLatlng = new google.maps.LatLng(Lat, Lng); 
    var title = {{location.title|json_encode|safe}} 
    var iwContent = {{location.render_front()|json_encode|safe}} 

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

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

    //putting the marker onto the markers array 
    markers.push(marker); 


    {% endfor %} 

    //creating the marker cluster 
    var markerCluster = new MarkerClusterer(map, markers); 

    } 

    </script>

就像我說的那樣，在我打電話給MarkerClusterer後，地圖看起來很正常。

來源

2012-12-01 clifgray

如果您縮放地圖，它會聚集嗎？這裏是一個[工作示例]（http://www.geocodezip.com/v3_MW_example_map3_clustered.html），帶有集羣。 – geocodezip

看起來您需要從標記中移除{map：map}屬性。

這是一個working example與羣集。

錯誤中鉻的Javascript控制檯on this page：

未捕獲的ReferenceError：不定義GOverlay markerclusterer.js：630
未捕獲的ReferenceError：標記沒有定義

第一意味着你使用錯誤版本的markerclusterer腳本（GOverlay來自Google Maps API v2）

If我使用your code和正確的MarkerClusterer並聲明瞭標記數組，集羣工作，但InfoWindow內容與標記關聯（可以使用createMarker函數修復）存在問題。

Here是一個使用createMarker函數修復標記與infowindow的關聯的示例。它基於你的代碼，但是還有改進的餘地（代碼中有很多冗餘）。

來源

2012-12-02 05:13:44 geocodezip

那麼做了什麼，但現在沒有人顯示出來... – clifgray

我不能測試你的代碼沒有鏈接到現場版本（因爲它使用PHP）。你可以做一個展示問題的jsfiddle嗎？或者在可以發佈的代碼中複製問題。你得到的JavaScript錯誤？ – geocodezip

這裏是現場示例：http://www.exployre.com/map當我回到我的開發機器時，我會稍微放一些代碼 – clifgray

Google Maps Marker Clusterer無法運作

回答

相關問題