1

私は次のテストGoogleマップを持っています：http：//dev.driz.co.uk/googlemap/

コードをテストするための例としてFoursquareマーカーのデザインを使用しています。これまで、ユーザーが世界のどこにいるかを小さなアバターで簡単に表示し、ホバーするとフォームに表示されます。ツールチップの。

次の部分は、いくつかのJSONデータを使用しています：http：//dev.driz.co.uk/googlemap/data.json

データに保存されている座標を使用して、これらの5つの投稿を地図上に表示し、現在のマーカーと同様の方法で表示したいと思います。次に、ユーザーはマーカーにカーソルを合わせると、例として次の情報を含むツールチップが表示されます。

Cameron asked:
Is Star Wars 3d still on at the cinema?
2012-05-20 02:31:21

ユーザーは、マーカーをクリックして投稿に移動できる必要があります。

Googleマップの開発者セクションを見てきましたが、適切なものが得られていないようで、ツールチップ関数とマップの実装でそれをどのように使用するのが最適かわかりません。

誰か助けてもらえますか？いくつかのコード例を投稿しますか？

ありがとう

4

1 に答える 1

3

次の手順を実行します

  1. AJAXリクエストを使用してデータをプルし、変数に格納します。

  2. データをループし、各アイテムを選択してマップに追加します

    for (var i = 0; i < data.length; i++) {
    var item = data[i];

    var markerLatlng = new google.maps.LatLng(item.Post.latitude, item.Post.longitude);
    var marker = new google.maps.Marker({
        position: markerLatlng
    });
    marker.item = item; // store information of each item in marker
    marker.setMap(map); // where `map` is the instance of Google Map
    google.maps.event.addListener(marker, "click", function(mark) {
        // retrieve information using `this.item` and create dynamic HTML to show it. 
        // this.item.Post.datetime, this.item.Post.content etc.
    });

}
于 2012-09-09T18:58:15.753 に答える