GoogleマップAPIを使用して - マーカークラスタ

私は実際にはJSのnoobです - 私は本当にそれを使用したことはありませんし、マーカーclustererグーグル提供を使用して苦労しています。私はGoogleマップ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 } 
    ?> 
    } 
}

クラスタの場所は緯度とlong型の配列だけでコードをドキュメントここ

をさラジアンしている - ちょうどadd.overlayを使用する際に私のコードは正常に動作しているが作ることがあまりにも多くありますマップが読取り可能であり、したがってクラスタリングの必要性がある。私が含まれているクラスタリングJSをロードします。 clustererオブジェクトを作成し、定義されたとおりにマップに渡します。私はJSの配列を作成し、

var mc = new MarkerClusterer(map, markers);

にでこれを渡すことができます知っている。しかし、私は単純に、この時点で配列を作成するために、JSの知識を持っていけない（私は学ぶつもり）と

var markers = []; 
//create array

情報Thanksfor - - のGoogleドキュメントでは、addMarker

こんにちはトムを使用して、一度に1つを反復して追加することができますアドバイス私はあなたがお勧め何を試してみましたが、以下を思い付いています

<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>

しかし、マップはまだ空です。私は今、文字通り最も基本的なGoogleの提供されたコードを使用して、ちょうどで自分のマーカーを読み込む。私が知っている私は私のページのソースを表示するために行くとき、私は、各マーカーのため

{ 

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

     markers.push(marker); 

      });

を見ることができるので、私のマーカーの位置は大丈夫でなければなりませんよ。それ以上の助けが本当にありがとう！

出典

2012-02-17 Daniel Benzie

google mapsユーティリティライブラリのページ（link）の例を確認してください。

基本的に、オブジェクトのインスタンス（マーカー）を配列に追加するには、配列を最初に定義する必要があります。したがって、マーカーを作成するループの上にvar markers = [];を置く必要があります。そして、マーカーを作成するときには、配列のpushメソッドを呼び出すことによってマーカー配列に追加する必要があります（MDNに行き、配列について読むのですが、そこから開始するのがよい時を知りたい場合は - JSについてのチュートリアルでは、（link）もそこにある。

あなたがマーカーを定義したのaferのでforeachループの内側にちょうどこれはMarkerCluster初期化のためのマーカーが利用できるようになります配列markers.push(marker);に追加します。

は、

JavaScriptをもう少し理解すると、この部分をJSONオブジェクトとしてDOMに渡すか、メソッドでDOMを処理することができますマーカーのデータをajaxクエリで取得するようにしてください。しかし、私は一度に1つのステップを推測します:)

www.codecademy.comで楽しいインタラクティブなチュートリアルを試してみてください。彼らは非常に基本的なものですが、それはあなたが

EDIT必要まさにだように思える：私は上記のいくつかのより多くの情報を追加した

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

こんにちはトム。トラブルをおかけして申し訳ありません！ –

私の返信で編集をチェックする - あなたは中括弧をHTMLに出力し、無効なJSコードを生成します。それが動作し、私に知らせる:)私はまた、ループからマーカー変数の宣言を移動したので、それが一度だけ宣言されるようにしました。 –

GoogleマップAPIを使用して - マーカークラスタ

答えて

関連する問題