javascript Google Maps API，是否可以突出显示特定街道？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13310776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps API, is it possible to highlight specific streets?
提问by user1081577
Is it possible with Google Maps API to highlight streets?
The only thing i could find that was close to this effect was drawing lines over them.
But this is a lot of work and more inaccurate. The lines will also go over place names.
What i want is to highlight certain streetnames as if you were navigating from point a to b.
So for example if 10 streets are closed by streetworkers i can highlight those streets.
是否可以使用 Google Maps API 突出显示街道？
我能找到的唯一接近这种效果的东西就是在它们上面画线。但这工作量很大，而且更不准确。这些线也将越过地名。
我想要的是突出某些街道名称，就像您从 a 点导航到 b 点一样。例如，如果 10 条街道被街头工作人员关闭，我可以突出显示这些街道。
回答by Jpsy
This can actually be done quite easily by using the Maps API directions renderer.
You have to provide the lat/long coordinates of the starting and ending point of your street, and the renderer does all the calculation and painting for you. You do NOT need to read in the direction steps and draw the polyline yourself!
这实际上可以通过使用 Maps API 方向渲染器轻松完成。
您必须提供街道起点和终点的纬度/经度坐标，渲染器会为您完成所有计算和绘制工作。您不需要阅读方向步骤并自己绘制折线！
See it in action here:
http://jsfiddle.net/HG7SV/15/
在这里查看它的实际效果：http:
//jsfiddle.net/HG7SV/15/
This is the code, all magic is done in function initialize():
这是代码，所有的魔法都在函数 initialize() 中完成：
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
// init map
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// init directions service
var dirService = new google.maps.DirectionsService();
var dirRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true});
dirRenderer.setMap(map);
// highlight a street
var request = {
origin: "48.1252,11.5407",
destination: "48.13376,11.5535",
travelMode: google.maps.TravelMode.DRIVING
};
dirService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
dirRenderer.setDirections(result);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
If your street is curved and the renderer should find a shortcut that you did not intend, this can easily be amended by adding intermediate waypoints to force the drawn line exactly to your desired street:
如果您的街道是弯曲的并且渲染器应该找到您不想要的快捷方式，则可以通过添加中间航路点以强制绘制的线精确到您想要的街道来轻松修改：
var request = {
origin: "48.1252,11.5407",
destination: "48.13376,11.5535",
waypoints: [{location:"48.12449,11.5536"}, {location:"48.12515,11.5569"}],
travelMode: google.maps.TravelMode.DRIVING
};
