マーカーと方向ルートをクリアしてマップをリセットするボタンをクリックすると、ユーザーが既にルートを作成しているかどうかわかりません。クリック イベント中に次のコードが含まれていると、機能が停止します。しかし、これらの 3 つのコードを削除すると、正常に動作しました...
directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay.setDirections({routes: []});
前述のコードを実行する前に、directionsDisplay が null かどうかを判断する必要がありますか? 私のコーディングはあなたのアドバイスのために以下に抽出されています...どうもありがとう...
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var StartMarker = null;
var EndMarker = null;
var directionsVisible = false;
var oldDirections = [];
var currentDirections = null;
google.maps.event.addListener(map, 'click', function(event) {
if (!StartMarker) {
origin = event.latLng;
lat = origin.lat();
lng = origin.lng();
/*If the origin is null, run UpdateLatLng() function to convert
the Lat, Lng of the mouse click position to Northing, Easting and
assign the value to the textbox */
UpdateLatLng();
var startimage = 'images/Start4.png';
StartMarker = new google.maps.Marker({
map: map,
position: origin,
icon: startimage
});
} else {
//Relocate the Starting point and assign the new position to Textbox
alert ("The starting point was relocated on screen");
StartMarker.setMap(null);
if (EndMarker !==null) {
EndMarker.setMap(null);
};
directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay.setDirections({routes: []});
var origin = event.latLng;
lat = origin.lat();
lng = origin.lng();
UpdateLatLng();
//StartMarker.setPosition(origin.getposition());
var startimage = 'images/Start4.png';
StartMarker = new google.maps.Marker({
map: map,
position: origin,
icon: startimage
});
}
});
google.maps.event.addListener(directionsDisplay, 'directions_changed',
function() {
if (currentDirections) {
oldDirections.push(currentDirections);
setUndoDisabled(false);
}
currentDirections = directionsDisplay.getDirections();
calcRoute();
});
function calcRoute() {
if (origin == null) {
alert("Please input the starting point");
return;
}
var mode;
switch (document.getElementById("mode").value) {
case "driving":
mode = google.maps.DirectionsTravelMode.DRIVING;
break;
case "walking":
mode = google.maps.DirectionsTravelMode.WALKING;
break;
case "transit":
mode = google.maps.DirectionsTravelMode.TRANSIT;
break;
}
var request = {
origin: origin,
destination: destination,
waypoints: waypoints,
travelMode: mode,
optimizeWaypoints: document.getElementById('optimize').checked,
avoidHighways: document.getElementById('highways').checked,
avoidTolls: document.getElementById('tolls').checked
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
directionsVisible = true;
}