-1
J'utilise l'API JavaScript de Google Maps et souhaite afficher deux routes (chacune avec différents styles de polyligne) sur la même carte. Le premier itinéraire est par mode de conduite et les emplacements de départ et d'arrivée sont une adresse entrée par l'utilisateur et un garage de stationnement choisi par l'utilisateur. Cette route sera affichée en ligne continue.API Google Maps JavaScript Afficher deux routes avec différents styles de polyligne sur la même carte
La deuxième route est par le mode de marche. Cette route va du parking à un autre emplacement statique sur la même carte définie comme centerOfMap. Cette route sera affichée en ligne pointillée avec des symboles en cercle.
sortie souhaitée:
// Set the driving route line
var drivingPathLine = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 0,
fillOpacity: 0
});
// Set the walking route line
var walkingLineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
scale: 3
};
var walkingPathLine = new google.maps.Polyline({
strokeColor: '#0eb7f6',
strokeOpacity: 0,
fillOpacity: 0,
icons: [{
icon: walkingLineSymbol,
offset: '0',
repeat: '10px'
}],
});
directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers:true,polylineOptions: walkingPathLine});
directionsService = new google.maps.DirectionsService;
Le problème est, la façon dont le code est actuellement écrit, seul le deuxième itinéraire (marche) est affiché sur la carte. Je sais que je dois placer les variables polyline et directionsRenderer dans la méthode getDirectionsHere, mais je ne sais pas comment. Toute orientation est appréciée!
Comment puis-je afficher les deux itinéraires sur la même carte et styliser chaque itinéraire différent (l'un avec une polyligne solide et l'autre avec une polyligne en pointillés)?
<!DOCTYPE html>
<html>
<body>
<style>
html {
\t height: 100%;
}
body {
\t height: 100%;
\t margin: 0;
\t padding: 0;
\t font-size: 26px;
font-family: "filson-soft";
}
#map_container {
height: 700px;
}
#map {
\t width: 100%;
\t height: 100%;
\t float: left;
}
</style>
<div id="map_container">
<div id="map"></div>
</div>
<script>
google.maps.event.addDomListener(window, "load", initMap);
var centerOfMap;
var geocoder;
var map;
var locations;
var gmarkers = [];
var search_lat;
var search_lng;
var infowindow;
var directionsDisplay;
var directionsService;
function initMap() {
gmarkers = [];
// Set the driving route line
var drivingPathLine = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 0,
fillOpacity: 0
});
// Set the walking route line
var walkingLineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
scale: 3
};
var walkingPathLine = new google.maps.Polyline({
strokeColor: '#0eb7f6',
strokeOpacity: 0,
fillOpacity: 0,
icons: [{
icon: walkingLineSymbol,
offset: '0',
repeat: '10px'
}],
});
directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers:true,polylineOptions: walkingPathLine});
directionsService = new google.maps.DirectionsService;
geocoder = new google.maps.Geocoder();
// SET THE CENTER OF THE MAP
centerOfMap = {
lat: 38.5803844,
lng: -121.50024189999999
};
// ADD THE MAP AND SET THE MAP OPTIONS
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: centerOfMap
});
var center_marker = new google.maps.Marker({
position: centerOfMap,
icon: 'http://maps.google.com/mapfiles/ms/micons/orange-dot.png',
map: map
});
center_marker.addListener('click', function() {
var gOneContent = '<div id="info_window">' +
'<h2>Center Of Map</h2>' +
'<div style="clear:both;height:40px;">' +
'<a href="#" id="getDirectionsButton" onclick="getDirectionsHere(' + centerOfMap.lat + ', ' + centerOfMap.lng + ');">Get Directions</a>' +
'</div>';
infowindow.setContent(gOneContent);
infowindow.open(map, center_marker);
map.setCenter(marker.getPosition());
});
locations = [
["Joes Parking Garage","1001 6th St","Sacramento","CA","95814","38.58205649","-121.49857521","parking_garage"],
["Mikes Parking Garage","918 5th St","Sacramento","CA","95814","38.5826939","-121.50012016","parking_garage"]
];
infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
console.log("found " + locations.length + " locations<br>");
for (i = 0; i < locations.length; i++) {
var icon_image = 'http://maps.google.com/mapfiles/ms/micons/parkinglot.png';
var coordStr = locations[i][5] + "," + locations[i][6];
\t var coords = coordStr.split(",");
\t var pt = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]));
bounds.extend(pt);
var location_name = locations[i][0];
var location_address = locations[i][1] + ', ' + locations[i][2] + ', ' + locations[i][3] + ' ' + locations[i][4];
marker = new google.maps.Marker({
position: pt,
animation: google.maps.Animation.DROP,
icon: icon_image,
map: map,
title: location_name,
address: location_address
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function() {
var content = '<div id="info_window">'
+ '<h2 style="margin:0;">' + locations[i][0] + '</h2>'
+ locations[i][1] + ', ' + locations[i][2] + ', ' + locations[i][3] + ' ' + locations[i][4]
+ '<div style="clear:both;height:40px;">'
+ '<a href="#" id="getDirectionsButton" onclick="getDirectionsHere(' + locations[i][5] + ', ' + locations[i][6] + ');">Get Directions</a>';
content += '</div>';
content += '</div>';
infowindow.setContent(content);
infowindow.open(map, marker);
map.setCenter(marker.getPosition());
}
})(marker, i));
}
}
function getDirectionsHere(lat,lng) {
// GET THE SEARCH ADDRESS
var address = 'Carmichael, CA';
console.log('search address: ' + address);
if (address) {
geocoder.geocode({ 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
search_lat = results[0].geometry.location.lat();
search_lng = results[0].geometry.location.lng();
console.log('search FROM lat: ' + search_lat + ' search FROM lng: ' + search_lng);
console.log('search TO lat: ' + lat + ' search TO lng: ' + lng);
calculateAndDisplayRoute(directionsService, directionsDisplay);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
// CHANGE THE ZOOM LEVEL AFTER THE USER SEARCHES TO FIT THE ROUTE WITHOUT SCROLLING
map.setOptions({ minZoom: 10, maxZoom: 17 });
map.setZoom(10);
// INITIALIZE GOOGLE MAPS DIRECTIONS SERVICE
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions'));
calculateAndDisplayRoute(directionsService, directionsDisplay);
// CALCULATE THE FIRST ROUTE AND DIRECTIONS (DRIVING) BASED ON ADDRESS
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
console.log('search address coordinates: ' + search_lat + ', ' + search_lng);
var selectedMode = document.getElementById('mode').value;
directionsService.route({
origin: {lat: search_lat, lng: search_lng},
destination: {lat: lat, lng: lng},
travelMode: "DRIVING"
}, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
// CALCULATE THE SECOND ROUTE AND DIRECTIONS (WALKING) BETWEEN PARKINGG GARAGE AND FINAL DESTINATION "CENTER OF MAP"
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var selectedMode = 'WALKING';
directionsService.route({
origin: {lat: lat, lng: lng},
destination: {lat: centerOfMap.lat, lng: centerOfMap.lng},
travelMode: google.maps.TravelMode[selectedMode]
}, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
} else {
getLocationPopup();
return;
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&callback=initMap"></script>
</body>
</html>
<script type="text/javascript">
</script>
</body>
</html>
duplication possible de [Comment changer la couleur de la ligne pointillée sur les directions Google map v3] (http://stackoverflow.com/questions/35502342/how-do-you-change-the-color-of-the -dotted-line-on-google-map-v3-directions) – geocodezip
Comment les routes sont-elles supposées aller? Où est le début des itinéraires? Je suppose qu'il va commencer - les directions de conduite - parking - directions de marche - fin/"centre de marqueur de carte". Actuellement, vous avez deux fonctions avec le même nom, cela ne fonctionnera pas, vous devez faire une fonction qui fait deux choses différentes (marche/conduite) ou deux fonctions avec des noms différents. – geocodezip
L'autre problème que vous avez est que votre polyline de directions est transparent (strokeOpacity: 0). – geocodezip