私はこのようなコードを使用して、出発地から目的地までのルートを走行描く：Google Map API V3 GoogleMaps Webアプリケーションのようにウォーキングパスを描画する方法は？私のアプリケーションで
directionsStartService.route(start_request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response); etc...
私は、ユーザが歩行によって行うことができますパスにintersectionPointsを表示する新機能を追加しましたが、私のようなこのパスを描画する必要がありますこの：
が、それは可能ですか？ Maps Javascript APIを使用しました。
敬具、 Gianlucaさん
一つのオプション、関連する質問からコードを活用：How do you change the color of the dotted line on Google map v3 directions（歩行へtravelModeを変更し、方向の端から余分なポリラインを追加することは可能でしょう要求された場所になります以下のコード
コードスニペット：
var geocoder;
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var m1 = new google.maps.Marker({
map: map,
title: "start",
position: new google.maps.LatLng(43.718526, 10.422241)
});
var m2 = new google.maps.Marker({
map: map,
title: "end",
position: new google.maps.LatLng(43.717234, 10.427337)
});
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
calculateAndDisplayRoute(new google.maps.LatLng(43.718526, 10.422241),
new google.maps.LatLng(43.717234, 10.427337),
directionsService, directionsDisplay);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
}
google.maps.event.addDomListener(window, "load", initialize);
function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay) {
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.TravelMode.WALKING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
// directionsDisplay.setDirections(response);
console.log(end.toUrlValue(6));
renderDirectionsPolylines(response, start, end);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
var polylineOptions = {
strokeColor: '#C83939',
strokeOpacity: 1,
strokeWeight: 4
};
var walkingPolylineOptions = {
strokeColor: '#C83939',
strokeOpacity: 0,
strokeWeight: 4,
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#C83939',
fillOpacity: 1,
scale: 2,
strokeColor: '#C83939',
strokeOpacity: 1,
},
offset: '0',
repeat: '10px'
}]
};
var walkingPolylineOptions2 = {
strokeColor: '#C83939',
strokeOpacity: 0,
strokeWeight: 4,
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#808080',
fillOpacity: 1,
scale: 2,
strokeColor: '#808080',
strokeOpacity: 1,
},
offset: '0',
repeat: '10px'
}]
};
function renderDirectionsPolylines(response, start, end) {
var legs = response.routes[0].legs;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < legs.length; i++) {
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
var stepPolyline = new google.maps.Polyline(polylineOptions);
if (steps[j].travel_mode == google.maps.TravelMode.WALKING) {
stepPolyline.setOptions(walkingPolylineOptions)
}
for (k = 0; k < nextSegment.length; k++) {
stepPolyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
stepPolyline.setMap(map);
}
}
if (google.maps.geometry.spherical.computeDistanceBetween(start, stepPolyline.getPath().getAt(0)) > 1) {
// add "dotted line"
var extraLine1 = new google.maps.Polyline(walkingPolylineOptions2);
extraLine1.setPath([stepPolyline.getPath().getAt(stepPolyline.getPath().getLength() - 1), end]);
extraLine1.setMap(map);
}
if (google.maps.geometry.spherical.computeDistanceBetween(end, stepPolyline.getPath().getAt(stepPolyline.getPath().getLength() - 1)) > 1) {
// add "dotted line"
var extraLine2 = new google.maps.Polyline(walkingPolylineOptions2);
extraLine2.setPath([stepPolyline.getPath().getAt(stepPolyline.getPath().getLength() - 1), end]);
extraLine2.setMap(map);
}
map.fitBounds(bounds);
}html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
関連する質問：（http://stackoverflow.com/questions/35502342/how-do-you-change-the [Googleマップv3の方向に点線の色を変更するにはどうすればよいです] google-map-v3-directions-color-of-dotted-line-on-google-map-v3-direction） – geocodezip
私の道は歩いて行かなければならないので、私は点線にします...なぜ私は "トランジット" 。 –
歩行ルートを使用する場合は、なぜ「乗り継ぎ」を選択する必要がありますか？ – geocodezip