20
A
回答
38
当您创建的DirectionsRenderer可以指定线的颜色,使用可选DirectionsRendererOptions结构。
这个工作对我来说,只要改变其中创建DirectionsRendered对象行:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: "red"
}
});
var mapOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {lat: 41.850033, lng: -87.6500523}
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<b>Start: </b>
<select id="start" onchange="calcRoute();">
<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" onchange="calcRoute();">
<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-canvas"></div>
</body>
</html>
5
你可以通过改变笔触颜色改变颜色:)作为
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({ polylineOptions: { strokeColor: "#8b0013" } });
directionsDisplay.setMap(map);
directionsDisplay.setOptions({ suppressMarkers: true });
calcRoute();
+0
如何包含“多段线(阵列)“和”polylineOptions“在生成静态地图时? like:“https://maps-api-ssl.google.com/maps/api/staticmap?....” –
相关问题
- 1. 如何更改Google地图v3方向上的虚线颜色
- 2. 如何更改Google地图中道路的颜色?
- 3. 如何更改总览图(Google Maps v3)中矩形的颜色?
- 4. 如何更改Google Maps API V3中的图标颜色?
- 5. 如何更改Google地图上特定道路的颜色?
- 6. 如何更改谷歌地图中的方向路径的颜色v3
- 7. 如何在Google Maps v3 API中更改KmlLayer的颜色?
- 8. 在Google地图上更改颜色
- 9. 我如何更改谷歌地图的海洋颜色v3
- 10. Javascript,更改google地图标记颜色
- 11. 更改google地图标记颜色
- 12. 如何更改Google地图中GMarker的颜色?
- 13. 如何更改Google地图中标记的颜色?
- 14. 如何使用Google Calendar API v3更改日历的颜色?
- 15. 如何更改Google地图API中每种类型的地图标记颜色v3
- 16. 改变颜色的谷歌地图V3的多折线行程
- 17. 如何更改Google地图标记的颜色?
- 18. 更改新的Google标记的颜色(Google JS API v3)
- 19. 如何从Google Map API v3地图中删除路线?
- 20. 动态地更改Google地图v3中的地图类型
- 21. 更改DirectionsRenderer生成的Google Maps API v3中各条腿的折线颜色
- 22. 更改谷歌地图上的多重折线描边颜色v3
- 23. 在Google地图中更改颜色多标记API
- 24. 在Google地图搜索框中更改颜色
- 25. 如何在多个多边形Google地图V3中填充不同的颜色?
- 26. 在Google地图V3中显示没有DirectionsRenderer的路线
- 27. Google地图改变KML的颜色
- 28. 如何更改primefaces中的线颜色5.1折线图
- 29. 更改iOS MapView中的地图颜色?
- 30. 如何在Morris.js线图中更改点的颜色和样式?
我一样简单得到一个错误,说polylineOptions之后的冒号是意外的。你可以再次检查代码并给我一些建议吗? – user2809895
适合我;我会用我使用的完整代码更新我的答案。您可能希望将您的代码添加到您的问题中,以防发生语法错误。 – duncan
thnq这么多的代码。这是工作。 – user2809895