29

大量のマーカー (10.000 以上) を処理できる Google マップでマップを作成するのが好きです。マップの速度を落とさないように、現在のビューポート内にあるマーカーのみを出力する XML ファイルを作成しました。

まず、initialize() を使用してマップ オプションを設定します。

function initialize() {
    var myLatlng = new google.maps.LatLng(51.25503952021694,3.27392578125);
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListener(map, 'tilesloaded', function () {
    loadMapFromCurrentBounds(map);
    }); 
}

イベント「tilesloaded」が終了したら、loadMapFromCurrentBounds() を使用します。この関数は現在の境界を取得し、XML ファイルにリクエストを送信して、現在のビューポート内にあるマーカーを表示します。

function loadMapFromCurrentBounds(map) {

    // First, determine the map bounds
    var bounds = map.getBounds();

    // Then the points
    var swPoint = bounds.getSouthWest();
    var nePoint = bounds.getNorthEast();

    // Now, each individual coordinate
    var swLat = swPoint.lat();
    var swLng = swPoint.lng();
    var neLat = nePoint.lat();
    var neLng = nePoint.lng();

    downloadUrl("mapsxml.php?swLat="+swLat+"&swLng="+swLng+"&neLat="+neLat+"&neLng="+neLng+"", function(data) {
        var xml = parseXml(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        var infoWindow = new google.maps.InfoWindow; 

        for (var i = 0; i < markers.length; i++) {
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var name = markers[i].getAttribute("name");

            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng"))
            );

            var html = "<b>" + name + "</b> <br/>" + address;
            var icon = customIcons[type] || {};

            var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow});

            bindInfoWindow(marker, map, infoWindow, html);
        }
    })
}

これはうまく機能していますが、現在のコードはビューポートにないマーカーをオフロードしません。それに加えて、すでにロードされているマーカーを再度ロードするため、同じエリアでマップをビュー時間移動すると、マップの速度が非常に速くなります。

そのため、ビューポートが変更されたときは、新しいマーカーをロードする前にまずマップ全体をクリアするのが好きです。これを行う最善の方法は何ですか？

4

6 に答える 6

17

マップに別のイベントリスナーを追加する必要があります。

google.maps.event.addListener(map,'bounds_changed', removeMarkers);

グーグルマップからすべてのマーカーを削除する方法の詳細については、こちらを参照してください-残念ながら、1回の呼び出しでそれを実行できるとは思いません。したがって、removeMarkersまたは同様のものを作成する必要があります。これは、マップ上のすべてのマーカーを反復処理して、次のように個別に削除する必要があります。

 markersArray[i].setMap(null);

次を使用して削除する前に、マーカーがビューポートにあるかどうかを確認する方が速いかどうかはわかりません。

 map.getBounds();

Google MapAPIv3イベントについてもっと読む

于 2010-06-01T10:01:41.333 に答える
6

このスレッドをチェックしてみてください。ダニエルはこれに非常にうまく答えました。

GPSファイルからGoogleマップでルートを作成する最も効率的な方法は何ですか?

また、bounds_changed は関数を呼び出す最初の機会です。tilesloaded は常に呼び出されます。ビューポートには、ビューポートを埋めるために複数のタイルが含まれる場合があります。

または、setVisible(false) を実行することもできます。

マーカーを削除するには、リスナーを削除する必要がある場合があります。

google.maps.event.clearInstanceListeners(marker);
marker.setMap(null);
markers.remove(marker);
delete marker;
于 2010-07-20T19:24:13.647 に答える
4

この記事はそれをかなりうまく説明しています： Googleマップで何千ものマーカーを動的にロードする

  • しきい値に達するまでマーカーを動的にロードする
  • すでに追加されているマーカーのハッシュテーブルを保持する
  • しきい値に達した後、現在ビューポート内にないマーカーを削除します
  • ユーザーがズームアウトしたときにマップからすべてのマーカーを削除し、ユーザーが適切なレベルにズームバックするまでマーカーを読み込まない
于 2012-04-20T11:52:43.037 に答える
2

元の関数は多くのコードのようです。私はこのようなことをします：

if( map.getBounds().contains(markers[i].getPosition()) ) {
   myMarkerDisplayFunction(markers[i]);
}
于 2012-07-23T23:57:14.463 に答える
0

Googleのこのドキュメントを確認することをお勧めします。それはあなたが必要とするものを説明します：

With the new list of markers you can remove the current markers 
(marker.setMap(null)) that are on the map and 
add the new ones (marker.setMap(map)).
于 2013-02-27T05:31:49.273 に答える