javascript - GoogleマップをAJAXで動的に更新する

Question

データベースにたくさんの住所があり、マーカーとしてGoogleマップに追加したいと思います。マップ上の選択した領域にあるマーカーのみをロードして追加したいだけです。マップをズームまたはドラッグすると、マップ上のマーカーが更新されます。それ、どうやったら出来るの？

よろしくお願いします！

Answer 1

多くのマーカーを管理するには、これを行うためにすでに構築されているインフラストラクチャを活用する必要があります。実際、Google Developersブログには、人気のあるオプションについて説明したすばらしい投稿があります。

https://developers.google.com/maps/articles/toomanymarkers

Marker Clustererは、マップアプリに関しては至る所で見られる非常に一般的なコンポーネントであり、探している要件に適合しているようです。また、Fusion Tablesを見てみると、何千もの場所でマップを作成するのが非常に簡単になります。

Answer 2

アリストスが言ったように、焦点が合うとマーカーが自動的に表示されます。しかし、私が膨大な数の連絡先を持っている場合、必要な場合にのみそれを行う方が実際には簡単かもしれません.

私の戦略は次のとおりです。

• 追加したアドレスを追跡してください。2 回行う必要はありません。

• 住所から LatLng を取得します。

• マップの現在の境界を取得します (getBounds() を使用して、現在表示されているマップの最小/最大 LatLng を取得します)

• 住所の LatLng が境界内にあるかどうかを確認します。

• ある場合は、マーカーを追加します。

ループ

本当にたくさんの住所がある場合は、LatLng をプリフェッチして、それを SQL テーブルに保存することをお勧めします。次に、間隔を使用してテーブルをクエリできます。

HTH

編集:いくつかのコード。マーカーの Array() と、北西と南東の境界があると仮定すると、次のようにすることができます。

function filterMarkers(nw, se, myMarkers) {
  var north=nw.lat();
  var west=nw.lng();
  var south=se.lat();
  var east=se.lng();
  var isInsideBounds=[];
  for (var i in myMarkers) {
    if(myMarkers[i].position.lat()>=north && myMarkers[i].position.lat()=<south && myMarkers[i].position.lng()>=west && myMarkers[i].position.lng()=<east) {
      isInsideBounds.push(myMarkers[i]);
    }
  }
  return isInsideBounds;
}