0

gmaps.jsの使用 （HTML）のようなものをループするにはどうすればよいですか？

<h1 id="location">Phuket</h1>

<div class="blist">
    <h3>Some hotel name</h3>
    <p>Adress 1</p>
</div>

<div class="blist">
    <h3>Another hotel name</h3>
    <p>Adress 2</p>
</div>

<div class="blist">
    <h3>Some name</h3>
    <p>Adress 3</p>
</div>

<div class="blist">
    <h3>Some other name</h3>
    <p>Adress 4</p>
</div>

..と：

  1. GEOコード+マップにマーカーを追加
  2. <h3>各マーカーポップアップにから名前を追加します
  3. 対応するポップアップにリンクするリンクを各ポップアップに追加します（アンカーリンクなど）
  4. すべてのGEOコードのロックアップに#locationを使用して追加します。これは、各名前がそのコンテキストなしではあまり多くを語らないためです。

ループを使用する必要がありますが、何時間も検索しても良い例は見つかりませんでした。ある種の一般的な使用法だと思うでしょう..:)

jsFiddleベースを確認/使用する>>

4

1 に答える 1

3

gmapsアダプターを使用すると、これが非常に簡単になります。

var map = new GMaps({
    div: '#mapCanvas',
    lat: 0,
    lng: 52,
    zoom: 13,
    width: '400px',
    height: '300px'
});

var popupTemplate = '<div class="popupText"><h3>%1</h3><p>%2</p><p>%3</p></div>';

$(".blist").each(function() {
    var title = $(this).find("h3").text();
    var address = $(this).find("p.address").text();
    var tel = $(this).find("p.tel").text();
    GMaps.geocode({
        address: address,
        callback: function(results, status) {
            if (status == 'OK') {
                var latlng = results[0].geometry.location;
                map.setCenter(latlng.lat(), latlng.lng());
                map.addMarker({
                    lat: latlng.lat(),
                    lng: latlng.lng(),
                    title: title,
                    infoWindow: {
                        content: popupTemplate.replace('%1',title).replace('%2',address).replace('%3',tel)
                    }
                });
            }
        }
    });
});

デモ

ノート：

  • ジオコードがプーケットの住所に対して信頼できないため、デモで使用されたロンドンのホテル
  • 電話番号欄を追加しました
于 2012-10-26T10:48:33.003 に答える