web-dev-qa-db-ja.com

Googleマップに表示されたルートを削除する

私は自分が集めた何かをやろうとしていますが、それを達成するのに少し苦労していますが、以前にかなりの回数行われています。

3つのGoogleマップを表示するWebページがあります。

これらのグーグルマップのそれぞれについて、私は郵便番号/郵便番号を受け入れるテキストボックスと「道順を取得」ボタンを持っています。

これらの各ボタンをクリックすると、google.maps.DirectionsServiceオブジェクトが使用され、ページの下部中央にある1つのパネルに1セットのルートが表示されます。

もう一度検索して新しいルートを見つけようとすると、問題が発生します。下の画像でわかるように、両方のルートがレンダリングされます。

Two routes rendered on a map

マーカーコレクションにあるマーカーが最後に1つあります。

この配列をループし、marker.setMap（null）を使用してこのマーカーをクリアする方法について、これまでに数回読みました。

ただし、特定の検索を行うたびに実際のルートをクリアできないようです。

複数のマップからマーカーをクリアすることに問題があった人はいますか？

何らかの方法でマップを完全にリセットする必要がありますか？

マーカーをクリアする必要がある場合、プロセスのライフサイクルのどの時点で、検索後に新しいジャーニーが表示されるが、古いジャーニーは削除されるようにする必要がありますか？

javascriptgoogle-mapsroutesgoogle-maps-markers
15
Karl

3つのGoogleマップすべてに同じgoogle.maps.DirectionsServiceオブジェクトを使用し、それらはすべて同じメソッドを呼び出して方向を計算しますが、独自のマップオブジェクトをパラメーターとして渡します。

function calcRoute(startPoint, location_arr) {
    // Create a renderer for directions and bind it to the map.
    var map = location_arr[LOCATION_ARR_MAP_OBJECT];
    var rendererOptions = {
    map: map
}

if(directionsDisplay != null) {
    directionsDisplay.setMap(null);
    directionsDisplay = null;
}

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById("directionsPanel"));

要点は、directionsDisplay！= nullの場合、nullをsetMapに渡すだけでなく、オブジェクト全体のアフターウェアも無効にするということです。これで修正されました。

17
Karl

これはあなたが必要とする唯一の部分です：

// Clear past routes
    if (directionsDisplay != null) {
        directionsDisplay.setMap(null);
        directionsDisplay = null;
    }
2
Friendly Code

私は答えを知りません....おそらくあなたがする必要があるのは状況に依存することだけです：

// put the codes after direction service is declared or run directionsService //

directionsDisplay.setMap(null); // clear direction from the map
directionsDisplay.setPanel(null); // clear directionpanel from the map          
directionsDisplay = new google.maps.DirectionsRenderer(); // this is to render again, otherwise your route wont show for the second time searching
directionsDisplay.setMap(map); //this is to set up again
1
I dont know

これは私のために働きます

// on initiate map
// this listener is not necessary unless you use listener
google.maps.event.addListener(directionsRenderer, 'directions_changed', function () {
    if(directionsRenderer.directions === null){
        return;
    }
    // other codes
});

// on clear method
directionsRenderer.set('directions', null);
0
Shanaka Madusanka