本文介绍了Google Maps JavaScript API - 在一种颜色中显示INACTIVE替代路线，在另一种颜色中显示ACTIVE替代路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用Google Maps JavaScript API，并为其他路线提供路线。
我想以灰色显示INACTIVE替代路线，当前的ACTIVE路线为霓虹绿色。
如何定位不活动和活动的路线状态并控制其颜色？
我已经能够使用，但现在我需要将目标设为无效状态和有效状态。
for （var j = 0; j< response.routes.length; j ++）{
var path = new google.maps.MVCArray（）;
polyArray.push（new google.maps.Polyline（{
map：map，
strokeColor：colors [j]，
strokeOpacity：1.0，
strokeWeight：5
}））;
polyArray [polyArray.length - 1] .setPath（path）;
for（var i = 0，len = response.routes [j] .overview_path.length; i< len; i ++）{
path.push（response.routes [j] .overview_path [i ]）;
$ / code $ / pre
<！DOCTYPE html>< html> < HEAD> < meta name =viewportcontent =initial-scale = 1.0，user-scalable = no> < meta charset =utf-8> < title>路线服务< / title> <风格> html，body {height：100％;保证金：0;填充：0; } #map {height：100％; }＃floating-panel {position：absolute;顶部：10px;左：25％; z-index：5; background-color：#fff;填充：5px;边界：1px固体＃999; text-align：center; font-family：'Roboto'，'sans-serif'; line-height：30px; padding-left：10px; }< / style> < /头> <身体GT; < div id =floating-panel> < b>开始：< / b> < select id =start> < option value =chicago，il> Chicago< / option> < option value =st louis，mo> St Louis< / option> < option value =joplin，mo> Joplin，MO< / option> < option value =oklahoma city，ok>俄克拉何马城< / option> < option value =amarillo，tx> Amarillo< / option> < option value =gallup，nm> Gallup，NM< / option> < option value =flagstaff，az> Flagstaff，AZ< / option> < option value =winona，az> Winona< / option> < option value =kingman，az>金曼< / option> < option value =barstow，ca> Barstow< / option> < option value =san bernardino，ca> San Bernardino< / option> < option value =los angeles，ca>洛杉矶< / option> < /选择> < b>结束：< / b> < select id =end> < option value =chicago，il> Chicago< / option> < option value =st louis，mo> St Louis< / option> < option value =joplin，mo> Joplin，MO< / option> < option value =oklahoma city，ok>俄克拉何马城< / option> < option value =amarillo，tx> Amarillo< / option> < option value =gallup，nm> Gallup，NM< / option> < option value =flagstaff，az> Flagstaff，AZ< / option> < option value =winona，az> Winona< / option> < option value =kingman，az>金曼< / option> < option value =barstow，ca> Barstow< / option> < option value =san bernardino，ca> San Bernardino< / option> < option value =los angeles，ca>洛杉矶< / option> < /选择> < / DIV> < div id =map>< / div> <脚本> var polyArray = []; var colors;函数initMap（）{polyArray = [];颜色= ['＃ff0000'，'＃00ff00'，'＃0000ff'，'＃ffff00'，'＃ff00ff'，'＃00ffff']; var directionsService = new google.maps.DirectionsService; var directionsDisplay = new google.maps.DirectionsRenderer; var map = new google.maps.Map（document.getElementById（'map'），{zoom：7，center：{lat：41.85，lng：-87.65}}）; directionsDisplay.setMap（地图）; var onChangeHandler = function（）{calculateAndDisplayRoute（directionsService，directionsDisplay）; }; document.getElementById（'start'）。addEventListener（'change'，onChangeHandler）; document.getElementById（'end'）。addEventListener（'change'，onChangeHandler）; }函数calculateAndDisplayRoute（directionsService，directionsDisplay）{directionsService.route（{origin：document.getElementById（'start'）。value，destination：document.getElementById（'end'）。value，travelMode：'DRIVING'，provideRouteAlternatives：true} ，function（response，status）{if（status ==='OK'）{for（var j = 0; j< response.routes.length; j ++）{var path = new google.maps.MVCArray（）; polyArray.push（new google.maps.Polyline（{map：map，strokeColor：colors [j]，strokeOpacity：1.0，strokeWeight：5}））; polyArray [polyArray.length - 1] .setPath（path）; for var i = 0，len = response.routes [j] .overview_path.length; i< len; i ++）{path.push（response.routes [j] .overview_path [i]）;}} directi onsDisplay.setDirections（响应）; } else {window.alert（'由于'+状态导致请求失败）; }}）; }< / script> < script async defer src =https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap> < /脚本> < / body>< / html>
解决方案当你激活一条路线时，通过多段线进行处理：
- 设置strokeColor的全部路线为灰色
- 将活动路线的折线颜色设置为活动颜色
（基于，点击折线来激活）
代码段：
$（document）.ready（function（）{var markers = [{title：''，'lat'：'56 .965969'，'lng'：'24 .143496'，'description'：''}，{title：''，'lat'：'56 .966259'，'lng'：'24 .385860'，'description'：'' }]; var service = new google.maps.DirectionsService（）; var polyArray = []; var infoWindow = new google.maps.InfoWindow（）; var map = new google.maps.Map（document.getElementById（map_1），mapOptions）; var lat_lng = new Array（）; var colors = ['＃ff0000'，'＃00ff00'，'＃0000ff'，'＃ffff00'，'＃ff00ff'，'＃00ffff']; var image ='https://maps.google.com/mapfiles/ms/micons/blue.png'; var marker = new google.maps.Marker（{position：new google.maps.LatLng（56.966259，24.385860），map：map，title：'Sillava'，icon：image}）;对于（i = 0; i
.map {width：100％;身高：100％;} body，html {height：100％; width：100％;}
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><script src =https://maps.googleapis.com/maps / api / js>< / script>< div id =map_1class =map>< / div>
I am using the Google Maps JavaScript API and am providing directions with alternative routes.
I would like to display the INACTIVE alternative routes in a gray color, and the current ACTIVE route in a neon green color.
How can I target the inactive and active route states and control their colors?
I've been able to change the alternative route colors using Geocodezip's example but now I need to target inactive and active states.
Here's an example of the functionality I'm going for
for (var j = 0; j < response.routes.length; j++) {
var path = new google.maps.MVCArray();
polyArray.push(new google.maps.Polyline({
map: map,
strokeColor: colors[j],
strokeOpacity: 1.0,
strokeWeight: 5
}));
polyArray[polyArray.length - 1].setPath(path);
for (var i = 0, len = response.routes[j].overview_path.length; i < len; i++) {
path.push(response.routes[j].overview_path[i]);
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<b>Start: </b>
<select id="start">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
<b>End: </b>
<select id="end">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
</div>
<div id="map"></div>
<script>
var polyArray = [];
var colors;
function initMap() {
polyArray = [];
colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: 'DRIVING',
provideRouteAlternatives: true
}, function(response, status) {
if (status === 'OK') {
for (var j = 0; j < response.routes.length; j++) {
var path = new google.maps.MVCArray();
polyArray.push(new google.maps.Polyline({
map: map,
strokeColor: colors[j],
strokeOpacity: 1.0,
strokeWeight: 5
}));
polyArray[polyArray.length - 1].setPath(path);
for (var i = 0, len = response.routes[j].overview_path.length; i < len; i++) {
path.push(response.routes[j].overview_path[i]);
}
}
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap">
</script>
</body>
</html>
解决方案 When you "activate" a route, process through the array of polylines:
- set the strokeColor of all the routes to 'grey'
- set the active route's polyline color to the "active" color
proof of concept fiddle (based on my example which you reference, click on the polyline to "activate" it)
code snippet:
$(document).ready(function() {
var markers = [{
"title": '',
"lat": '56.965969',
"lng": '24.143496',
"description": ''
}, {
"title": '',
"lat": '56.966259',
"lng": '24.385860',
"description": ''
}];
var service = new google.maps.DirectionsService();
var polyArray = [];
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_1"), mapOptions);
var lat_lng = new Array();
var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
var image = 'https://maps.google.com/mapfiles/ms/micons/blue.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.966259, 24.385860),
map: map,
title: 'Sillava',
icon: image
});
for (i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
}
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
service.route({
origin: src,
destination: des,
provideRouteAlternatives: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var j = 0; j < result.routes.length; j++) {
var path = new google.maps.MVCArray();
polyArray.push(new google.maps.Polyline({
map: map,
strokeColor: "grey",
strokeOpacity: 0.3,
strokeWeight: 5
}));
if (j == 0) polyArray[0].setOptions({
strokeColor: '#00ff00',
strokeOpacity: 1.0
});
polyArray[polyArray.length - 1].setPath(path);
google.maps.event.addListener(polyArray[polyArray.length - 1], 'click', function() {
for (var i = 0; i < polyArray.length; i++) {
polyArray[i].setOptions({
strokeOpacity: 0.3,
strokeColor: "grey"
});
}
this.setOptions({
strokeOpacity: 1.0,
strokeColor: "#00ff00"
});
})
for (var i = 0, len = result.routes[j].overview_path.length; i < len; i++) {
path.push(result.routes[j].overview_path[i]);
}
}
}
});
}
}
});
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(56.975749, 24.279310),
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
styles: [{
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#d3d3d3"
}, {
"lightness": 17
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}, {
"lightness": 20
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 17
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 29
}, {
"weight": 0.2
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 18
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 16
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}, {
"lightness": 21
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#dedede"
}, {
"lightness": 21
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}, {
"lightness": 16
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"saturation": 36
}, {
"color": "#333333"
}, {
"lightness": 40
}]
}, {
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"color": "#f2f2f2"
}, {
"lightness": 19
}]
}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{
"color": "#fefefe"
}, {
"lightness": 20
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#fefefe"
}, {
"lightness": 17
}, {
"weight": 1.2
}]
}]
};
.map {
width: 100%;
height: 100%;
}
body,
html {
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_1" class="map"></div>
这篇关于Google Maps JavaScript API - 在一种颜色中显示INACTIVE替代路线，在另一种颜色中显示ACTIVE替代路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
10-16 05:38