如何突出显示Google地图上的道路？

Question

我想突出显示内布拉斯加州林肯市的谷歌地图。根据该城市的多重上市服务（MLS）地图所定义的区域。该区域地图可以在这里找到： http://www.lincolnrealtors.com/pdf/MLS_Area_Map

我可以构建例如图中hightlighting区域31简单多边形以上使用：

// Define the LatLng coordinates for the polygon's path. 
    var Region31 = [ 
    {lat:40.813614, lng: -96.682262}, 
{lat: 40.813484, lng: -96.644154}, 
{lat: 40.788145, lng: -96.644154}, 
{lat: 40.8027, lng: -96.682348}, 
{lat: 40.813614, lng: -96.682262} 
    ]; 

但是，这些仅仅是线时在现实中，MLS区域是根据实际高速公路划定。例如，区域31沿“Normal Blvd”的下边框不是一条直线，正如您通过查看Google地图所看到的那样。

在Google地图中是否有突出显示高速公路的特定长度的方法，如果有的话，有人可以解释这一点或提供参考吗？

感谢， 多米尼克

Answer 1

唯一的API来在我心目中是Polyline。

Answer 2

您可以使用DirectionsService返回道路后面的多段线。

proof of concept fiddle (I need to adjust some of your points to avoid the directions service adding extra turns)

代码片断：

var geocoder; 
 
var map; 
 
// Define the LatLng coordinates for the polygon's path. 
 
var Region31 = [{ 
 
    lat: 40.813436, 
 
    lng: -96.682268 
 
}, { 
 
    lat: 40.813363, 
 
    lng: -96.644167 
 
}, { 
 
    lat: 40.788145, 
 
    lng: -96.644154 
 
}, { 
 
    lat: 40.8027, 
 
    lng: -96.682348 
 
}, { 
 
    lat: 40.813435, 
 
    lng: -96.682267 
 
}]; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (var i = 0; i < Region31.length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
     position: Region31[i], 
 
     map: map, 
 
     draggable: true 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    directionsService.route({ 
 
     origin: Region31[i], 
 
     destination: Region31[(i + 1) % Region31.length], 
 
     travelMode: google.maps.TravelMode.DRIVING 
 
    }, function(response, status) { 
 
     if (status === google.maps.DirectionsStatus.OK) { 
 
     var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
      map: map, 
 
      preserveViewport: true 
 
     }) 
 
     directionsDisplay.setDirections(response); 
 
     } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
     } 
 
    }); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script> 
 
<div id="map_canvas"></div>