Google Maps API, is it possible to highlight specific streets?

问题

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.

回答1:

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!

See it in action here:
http://jsfiddle.net/HG7SV/15/

This is the code, all magic is done in function 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
                };

来源：https://stackoverflow.com/questions/13310776/google-maps-api-is-it-possible-to-highlight-specific-streets

标签

javascript

google-maps

google-maps-api-3