谷歌地图API，是否可以突出显示特定街道？

Question

谷歌地图API，是否可以突出显示特定街道？

11

使用Google Maps API是否可以高亮显示街道？
我能找到的与此效果最接近的是在其上绘制线条。但这需要大量工作且不太准确。线条还会覆盖地名。

我想要的是像你从A点到B点一样突出显示某些街道名称。例如，如果有10条街道因施工而关闭，我可以突出显示这些街道。

- user1081577

1

请看这里，特别是这个链接： http://econym.org.uk/gmap/example_snappath.htm - Moritz Roessler

1

这些示例是Google Maps API v2，相同的概念适用于v3，但它们正在街道上绘制线条，而OP不想这样做。 - geocodezip

哦，抱歉我不知道我可以接受答案。但让我们保持话题。有人知道解决方案吗？我可以想象人们以前遇到过这个问题。但也许这是不可能的。 - user1081577

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jpsy · Accepted Answer

使用Maps API方向渲染器可以轻松实现此操作。您需要提供街道起点和终点的纬度/经度坐标，渲染器会为您完成所有计算和绘制工作。您无需阅读方向步骤并自行绘制折线！

在此处查看其演示效果：
http://jsfiddle.net/HG7SV/15/

这是代码，所有的奇迹都发生在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>

如果您的街道是弯曲的，而渲染器应该找到一个您没有打算的捷径，那么可以通过添加中间路径点来轻松解决此问题，以确保绘制出的线路恰好符合您所需的街道：

                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
                };