Question

我想强调一张谷歌地图，林肯，NE。根据城市的多重上市服务（MLS）地图定义的地区。这个地区地图可以在这里找到： http://www.lincolnrealtors.com/pdf/MLS_Area_Map

我可以使用：

构建简单的多边形，例如上图中的高亮区域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的下边界沿着＃34; Normal Blvd＆＃34;通过查看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)

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: