使用谷歌地圖API - 標記集羣

我真的是一個JS noob - 我從來沒有真正使用過它，我正在努力使用標記clusterer谷歌提供。我有弧度的文檔使用谷歌地圖API - 標記集羣

這裏是代碼

<script src="http://localhost/wheredidmytweetgo/js/markercluster.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
function load() { 
    if (GBrowserIsCompatible()) { 
    var map = new GMap2(
    document.getElementById("map")); 
    map.addControl(new GSmallMapControl()); 
    map.setCenter(
    new GLatLng(56.65622649350222, -19.86328125), 2); 
    var mc = new MarkerClusterer(map); 
    function createMarker(point, text, title) { 
     var marker = 
     new GMarker(point,{title:title}); 
     GEvent.addListener(
     marker, "click", function() { 
     marker.openInfoWindowHtml(text); 
     }); 
     return marker; 
    } 
    <?php 

    foreach ($cluster_location as $location) { 
    ?> 
    var marker = createMarker(
    new GLatLng(<?php echo $location ?>), 
    'Marker text <?php echo $location ?>', 
    'Example Title text <?php echo $location ?>'); 
    map.addMarker(marker); 
    <?php } 
    ?> 
    } 
}

集羣位置正好是拉丁語和多頭陣列 - 我的代碼只是使用add.overlay時工作正常但是有太多的做因此地圖可讀性對聚類的需求。我加載了我已經包含的集羣JS。我創建clusterer對象並按照定義傳入地圖。

var markers = []; 
//create array

我知道我可以創建一個JS數組和它傳遞給

var mc = new MarkerClusterer(map, markers);

但我根本沒有這個JS知識在這個時候（我打算學習）和創建一個數組谷歌文檔，建議您可以迭代，每次使用addMarker

你好Tom添加一個 - Thanksfor的信息 - 我曾嘗試做你的建議是什麼，並與下面傳來：

<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://localhost/wheredidmytweetgo/js/markercluster.js"> 

    </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': 13, 
      'center': center, 
      'mapTypeId': google.maps.MapTypeId.ROADMAP 
     }); 

     var markers = []; 
     <?php foreach ($cluster_location as $location) { ?>{ 
     var marker = new google.maps.Marker({'position': <?php echo $location;?>}); 
    markers.push(marker); 
} 
     <? 
     } 
     ?> 
     var markerCluster = new MarkerClusterer(map, markers); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <h3>A simple example of MarkerClusterer (100 markers)</h3> 
    <p> 
     <a href="?compiled">Compiled</a> | 
     <a href="?">Standard</a> version of the script. 
    </p> 
    <div id="map-container"><div id="map"></div></div> 
    </body> 
</html>

但我的地圖仍然加載爲空。現在，我使用的字面最基本的谷歌提供的代碼，只是加載自己的標記。我知道我的標記定位應該是可以的，因爲當我去查看我的網頁源代碼，我可以看到

{ 

      var marker = new google.maps.Marker({'position': 40.0994425,-74.9325683}); 

     markers.push(marker); 

      });

每個標記。任何更多的幫助真的會很感激！

來源

2012-02-17 Daniel Benzie

請檢查谷歌地圖實用程序庫頁面上的示例（link）。

但基本上要將一個對象（標記）的實例添加到數組中，您必須首先定義數組，因此您需要在創建標記的循環上方執行var markers = [];。然後當你創建標記時，你必須通過調用數組的push方法將它們添加到標記數組（如果你想知道它是從哪開始的好時機 - 有一個關於JS教程，以及（link）。

所以foreach循環內AFER已定義的標記只是將其添加到陣列markers.push(marker);這將使可用於MarkerCluster初始化標記。

從更長遠的角度來看，如果您更好地理解JavaScript，您可能需要將此部分替換爲將數據作爲JSON對象傳遞給DOM，以便方法可以處理它或者甚至更好 - 使用ajax查詢檢索標記的數據。但我一次只想到一個步驟:)

也許嘗試在www.codecademy.com有趣的互動教程？他們是很基本的，但好像這正是你需要

編輯：

var marker, 
    markers = []; 

<?php foreach ($cluster_location as $location) { ?> 
    marker = new google.maps.Marker({'position': <?php echo $location;?>}); 
    markers.push(marker); 
<? } ?>

來源

2012-02-17 22:35:36

你好Tom我加入了上述一些更多的信息。對不起，麻煩！ – 2012-02-18 00:31:23

檢查我的回覆中的編輯 - 你已經將捲曲的護腕輸出到HTML，並且它會生成無效的JS代碼。嘗試它是否有效，並讓我知道:)我也將標記變量的聲明移出循環，因此它只聲明一次。 – 2012-02-18 02:28:01

使用谷歌地圖API - 標記集羣

回答

相關問題