0

グーグルマップAPIとスタックオーバーフローの仲間の初心者。

地図上に複数のルートを描画できるアプリを作成しています。最初は、テキスト ボックスが 1 つしかなく、アドレスを入力して [計算] ボタンをクリックすると、問題なく動作します。ただし、もう一度クリックすると、パスが再び描画されます。(パスは紺色で、別のルートの上に青いルートがあることを意味します)

どういうわけかマップを更新したり、以前に描かれたパスをクリアしたりする方法はありますか?

私のコードはこのようなものです。テキスト ボックスの値が配列に追加されるように記述し、この配列を使用してルートを計算します。

form.onsubmit = function () {
        //var okay = true;
        var userAddressArray = [];
        $("input.address").each(function( index ) {
        userAddressArray.push($(this).val());

        });
        num = 1;
        for(var i=0; i < userAddressArray.length; i++){
            directionsVisible = false;
            destination = userAddressArray[i];
            calcRoute(destination, num); 
            num = num + 1;

        }

        return false; 
    }

これが私のcalcRoute関数です：

   function calcRoute(inputAddress, number) {
        if (!geocoder) {
            geocoder = new google.maps.Geocoder();
        }

        var geocoderRequest = {
            address: inputAddress
        }

        geocoder.geocode(geocoderRequest, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);

                destinationLoc = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                //var dest = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());

             // compare this to an array of pre-loaded points
                getClosestPath(destinationLoc); 
             //drawing the path
               requestDirections(closest, destinationLoc, inputAddress, destinationLoc, number);

            }


        });

    }

requestDirections 関数:

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

関数 requestDirections(開始、終了、アドレス、番号) {

clearOverlays();

directionsService.route({
    origin: start,
    destination: end,
    avoidTolls: true,
    travelMode: google.maps.TravelMode.WALKING
}, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        renderDirections(result, address, number);
    }

    if (status == google.maps.DirectionsStatus.NOT_FOUND) {
        alert("One of the locations you entered could not be geocoded.");
    }

    if (status == google.maps.DirectionsStatus.ZERO_RESULTS) {
        alert("Invalid address entered, please enter a valid address.");
    }
});

}

renderDirections 関数:

function renderDirections(result, address, number) {

var myRoute = result.routes[0].legs[0];

for (var i = 0; i < myRoute.steps.length; i++) {
}
    var marker = new google.maps.Marker({
    position: myRoute.steps[i - 1].end_point,
    map: map,
    icon: "https://maps.gstatic.com/mapfiles/ms2/micons/green-dot.png"

});

  var directionsRenderer = new google.maps.DirectionsRenderer({
        map: map,
        suppressMarkers: true,
        draggable: true
    });
  markersArray.push(marker);

  directionsRenderer.setMap(map);
  //polylineOpts.setMap(map);
  directionsRenderer.setDirections(result);

}

これが十分に詳細であることを願っています。そうでない場合は、お知らせください。これで私を助けてくれることを願っています！

4

1 に答える 1

0

directionRenderer をグローバルにします (元のコードは、ルート リクエストごとに新しいものを作成します)。

var directionsRenderer = null;
function renderDirections(result, address, number) {

var myRoute = result.routes[0].legs[0];

for (var i = 0; i < myRoute.steps.length; i++) {
}
    var marker = new google.maps.Marker({
    position: myRoute.steps[i - 1].end_point,
    map: map,
    icon: "https://maps.gstatic.com/mapfiles/ms2/micons/green-dot.png"

});

  directionsRenderer = new google.maps.DirectionsRenderer({
        map: map,
        suppressMarkers: true,
        draggable: true
    });
  markersArray.push(marker);

  directionsRenderer.setMap(map);
  //polylineOpts.setMap(map);
  directionsRenderer.setDirections(result);

}
于 2013-08-01T12:29:39.683 に答える