0
ウェイポイント順にポリラインを表示したい。私はA（ソース）からC（宛先）までB（中点）を通って移動したいと考えると、ポリラインも同じ順序で表示する必要があります。しかし、私のコードは正しく動作しません。ポリラインは、A、Bの順に描画されるべき、及びC. Googleマップのウェイポイント順にポリラインを表示するにはどうすればよいですか？
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBkDLA8MD77ueEwwxMgxadTBtzjgU0fJE0"></script>
<script>
// The below code shows polyline incorrectly
var map;
var wyPts = [];
function addWayPoints(location) {
wyPts.push({
location: location,
stopover: true
});
}
function createInfoWindowContent(latLng, contentStr) {
var content = '<p><b>' + contentStr + ' </b> </p>' + 'LatLng: ' + latLng;
return content;
}
function displayRoute(origin, destination, service, display) {
service.route({
origin: origin,
destination: destination,
waypoints: wyPts,
optimizeWaypoints: false,
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
display.setDirections(response);
}
else {
alert('Could not display directions due to: ' + status);
}
}
);
}
function initMap() {
var src = new google.maps.LatLng(17.45165, 78.3942433);
var midPt1 = new google.maps.LatLng(17.4510881, 78.3932577);
addWayPoints(midPt1);
var destination = new google.maps.LatLng(17.4517866, 78.3927456);
map = new google.maps.Map(document.getElementById('map'), {
center: src,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT,
mapTypeIds: [google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.HYBRID]
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
zoom: 14
});
/*var coordInfoWindowSrc = new google.maps.InfoWindow({
content: createInfoWindowContent(src, "Source"),
maxWidth: 180
});
coordInfoWindowSrc.setPosition(src);
coordInfoWindowSrc.open(map);
var coordInfoWindowDest = new google.maps.InfoWindow({
content: createInfoWindowContent(destination, "Destination"),
maxWidth: 180
});
coordInfoWindowDest.setPosition(destination);
coordInfoWindowDest.open(map);*/
var polylineProps = {
strokeColor: '#009933',
strokeOpacity: 1.0,
strokeWeight: 3
};
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: false,
map: map,
suppressMarkers: false,
polylineOptions: polylineProps
});
var directionsService = new google.maps.DirectionsService();
displayRoute(src, destination, directionsService, directionsDisplay);
directionsDisplay.addListener(
'change',
function() {
displayRoute(src, destination, directionsService,
directionsDisplay);
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<html>
<div id="map" style="width:100%; height:90vh;">
<div id="map-canvas" style="width:100%; height:100%;"></div>
<div id="crosshair"></div>
</div>
</html>