Google Maps JavaScript API 在同一张地图上显示两条不同折线样式的路线
Posted
技术标签:
【中文标题】Google Maps JavaScript API 在同一张地图上显示两条不同折线样式的路线【英文标题】：Google Maps JavaScript API Display Two Routes with Different Polyline Styles on same Map 【发布时间】：2016-07-28 23:29:22 【问题描述】：我正在使用 Google Maps javascript API，并希望在同一张地图上显示两条路线（每条路线都有不同的折线样式）。
第一条路线是按驾驶方式，起点和终点分别是用户输入的地址和用户选择的停车场。该路线将显示为实线。
第二条路线是步行方式。这条路线是从停车场到定义为 centerOfMap 的同一地图上的另一个静态位置。这条路线将显示为带有圆圈符号的虚线。
期望的输出：
// 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;
问题是，目前代码的编写方式，地图上只显示了第二条路线（步行路线）。我知道我需要将折线变量和方向渲染器放在 getDirectionsHere 方法中，但不确定如何。任何指导表示赞赏！
如何在同一张地图上显示两条路线并使每条路线的样式不同（一条为实线折线，另一条为虚线折线）？
<!DOCTYPE html>
<html>
<body>
<style>
html
height: 100%;
body
height: 100%;
margin: 0;
padding: 0;
font-size: 26px;
font-family: "filson-soft";
#map_container
height: 700px;
#map
width: 100%;
height: 100%;
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];
var coords = coordStr.split(",");
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>【问题讨论】：
How do you change the color of the dotted line on Google map v3 directions的可能重复 【参考方案1】：您的代码有两个问题：
-
行车路线折线是透明的 (strokeOpacity: 0)
您有两个
calculateAndDisplayRoute 函数，一个用于驾驶，一个用于步行，在 javascript 中不起作用，请给它们两个不同的名称或创建一个函数来处理这两种情况：
function calculateAndDisplayRoute(start, end, driving)
var selectedMode;
if (driving) selectedMode = "DRIVING";
else selectedMode = "WALKING";
directionsService.route(
origin: start,
destination: end,
travelMode: selectedMode
, function(response, status)
if (status == google.maps.DirectionsStatus.OK)
if (driving)
directionsDisplayD.setDirections(response);
var start = new google.maps.LatLng(lat, lng);
var end = centerOfMap;
calculateAndDisplayRoute(start, end, false);
else directionsDisplayW.setDirections(response);
else
window.alert('Directions request failed due to ' + status);
);
proof of concept fiddle
[
代码 sn-p：
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 directionsDisplayD;
var directionsDisplayW;
var directionsService;
function initMap()
gmarkers = [];
// Set the driving route line
var drivingPathLine = new google.maps.Polyline(
strokeColor: '#FF0000',
strokeOpacity: 1,
fillOpacity: 1
);
// 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'
],
);
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
);
directionsDisplayW = new google.maps.DirectionsRenderer(
suppressMarkers: true,
polylineOptions: walkingPathLine,
map: map,
preserveViewport: true
);
directionsDisplayD = new google.maps.DirectionsRenderer(
suppressMarkers: true,
polylineOptions: drivingPathLine,
map: map
);
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];
var coords = coordStr.split(",");
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);
var start = new google.maps.LatLng(search_lat, search_lng);
var end = new google.maps.LatLng(lat, lng);
calculateAndDisplayRoute(start, end, true);
// 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);
directionsDisplayD.setPanel(document.getElementById('directions'));
else
alert("Geocode was not successful for the following reason: " + status);
);
// CALCULATE THE FIRST ROUTE AND DIRECTIONS (DRIVING) BASED ON ADDRESS
function calculateAndDisplayRoute(start, end, driving)
console.log('start address coordinates: ' + start.lat() + ', ' + start.lng());
var selectedMode; // = document.getElementById('mode').value;
if (driving) selectedMode = "DRIVING";
else selectedMode = "WALKING";
directionsService.route(
origin: start,
destination: end,
travelMode: selectedMode
, function(response, status)
if (status == google.maps.DirectionsStatus.OK)
if (driving)
directionsDisplayD.setDirections(response);
var start = new google.maps.LatLng(lat, lng);
var end = centerOfMap;
calculateAndDisplayRoute(start, end, false);
else directionsDisplayW.setDirections(response);
else
window.alert('Directions request failed due to ' + status);
);
html
height: 100%;
body
height: 100%;
margin: 0;
padding: 0;
font-size: 26px;
font-family: "filson-soft";
#map_container
height: 100%;
#map
width: 100%;
height: 100%;
float: left;
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div id="map_container">
<div id="map"></div>
</div>【讨论】：
以上是关于Google Maps JavaScript API 在同一张地图上显示两条不同折线样式的路线的主要内容，如果未能解决你的问题，请参考以下文章
在 typescript/javascript 的 google.maps.Geocoder().geocode() 上使用全局变量
Google Maps JavaScript API 警告：NoApiKeys
Google Maps Javascript API、DirectionsService、国家列表