1

以下は、特定のポイントからルートを生成するために使用している関数です。ユーザーがルート案内をリクエストできる場所がいくつかあります... ユーザーがルート案内を 2 回目にリクエストすると、最初のルートが地図に表示されたままになります。これは明らかに見栄えがよくありません。どうすれば削除できますか?

base.getRoute = function(start, la, lo) {

        var directionsService = new google.maps.DirectionsService();

        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(base.map);
        directionsDisplay.setPanel(document.getElementById("drivingDirectionsPanel"));

        start+=",uk";
        var end = new google.maps.LatLng(la, lo);
        var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function(response,status) {
            if(status == google.maps.DirectionsStatus.OK) {


                $('#drivingDirectionsPanel').html('');
                directionsDisplay.setDirections(response);

                $('html, body').animate({ 
                      scrollTop: $('#drivingDirectionsPanel').offset().top 
                  }, 1500);

            } else {
                alert("There was a problem finding directions");
            }
        });         
    };

を追加してみました

directionsDisplay.setMap(null);

しかし、これは機能しません。

アイデアはありますか？ありがとう

4

4 に答える 4

1

ルート案内に「クラス」またはグローバル変数を表示させて、ルート案内をレンダリングするときにパネルをクリアします。

于 2012-06-18T15:03:13.537 に答える
0

これが私がそれをした方法です：

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$.extend(map,{
    pv: {
        markerArray: [],
        areaCircle: null,
        userLocation: {
            latitude: 38.68551,
            longitude: -98.789062
        },
        removeAllMarkers: function(){
            for (var i = 0; i < this.markerArray.length; i++) {
                if (this.markerArray[i].directions) this.markerArray[i].directions.setMap(null);
                this.markerArray[i].setMap(null);
            }
        },
        removeAllDirections: function(){
            for (var i = 0; i < this.markerArray.length; i++) {
                if (this.markerArray[i].directions) this.markerArray[i].directions.setMap(null);
            }
        },
        geocoder: new google.maps.Geocoder(),
        directions: new google.maps.DirectionsService(),
        directionPanel: document.getElementById('directions'),
        center: null
    }
});

マーカーを追加するときはいつでも、markerArray 内にマーカーへの参照を追加します。次に、すべての方向またはすべてのマーカーを削除したい場合は、単にmap.pv.removeAllDirections()またはを呼び出します。map.pv.removeAllMarkers()

于 2012-06-18T15:04:52.253 に答える
0

上記で提案したソリューションの組み合わせを使用して、これを機能させました。したがって、「directionsDisplay」はグローバルである必要があり、次に、directionsDisplay をもう一度作成する前に、directionsDisplay.setMap(null) を呼び出す必要があり、以前のルートがマップからクリアされます。

コードは次のとおりです。

    if(directionsDisplay != undefined) 
        directionsDisplay.setMap(null);

    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({preserveViewport:true});
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('dvDirResults'));

    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            $('#<%= lblGetDirError.ClientID %>').hide();
            $('#dvDirResults').html("");
            directionsDisplay.setDirections(response);
            map.panToBounds(response.routes[0].bounds);
            map.setCenter(response.routes[0].bounds.getCenter()); 
            //map.fitBounds(response.routes[0].bounds);
            if(map.getZoom() < 10) map.setZoom(10);
        }
        else
            $('#<%= lblGetDirError.ClientID  %>').show();
    });
于 2017-11-01T19:22:06.530 に答える