Google Maps JavaScript API - 从捕捉到道路的折线创建多边形答案

【问题标题】：Google Maps JavaScript API - Create Polygon from Polylines Snapped to RoadGoogle Maps JavaScript API - 从捕捉到道路的折线创建多边形
【发布时间】：2016-02-11 00:54:26
【问题描述】：

我正在尝试填充由捕捉到道路的多段线包围的区域。这是我的代码：

var pos = new google.maps.LatLng(29.744860,-95.361302);

var myOptions = {
zoom: 12,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), myOptions);

map.setCenter(pos);

roadTrip1 = [
new google.maps.LatLng(29.692093, -95.377307),
new google.maps.LatLng(29.813047,-95.399361),
new google.maps.LatLng(29.692093, -95.377307)
];

var traceroadTrip1 = new google.maps.Polyline({
path: roadTrip1,
strokeColor: "red",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
});

var service1 = new google.maps.DirectionsService(),traceroadTrip1,snap_path=[];
traceroadTrip1.setMap(map);
for(j=0;j<roadTrip1.length-1;j++){
service1.route({origin: roadTrip1[j],destination: roadTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
    if(status == google.maps.DirectionsStatus.OK) {
        snap_path = snap_path.concat(result.routes[0].overview_path);
        traceroadTrip1.setPath(snap_path);
    }
});


}

我对 javascript 不太熟悉，我希望从捕捉到道路的折线创建多边形很容易。一旦我有一个多边形，我想为该区域着色。

感谢所有帮助。

【问题讨论】：

标签： javascript api google-maps

【解决方案1】：

将google.maps.Polyline 更改为google.maps.Polygon。

var traceroadTrip1 = new google.maps.Polygon({
  path: roadTrip1,
  strokeColor: "red",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});

proof of concept fiddle

代码 sn-p：

function initialize() {

  var pos = new google.maps.LatLng(29.813047, -95.399361);

  var myOptions = {
    zoom: 11,
    center: pos,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map'), myOptions);

  map.setCenter(pos);

  roadTrip1 = [
    new google.maps.LatLng(29.692093, -95.377307),
    new google.maps.LatLng(29.813047, -95.399361),
    new google.maps.LatLng(29.692093, -95.377307)
  ];

  var traceroadTrip1 = new google.maps.Polygon({
    path: roadTrip1,
    strokeColor: "red",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  var service1 = new google.maps.DirectionsService(),
    traceroadTrip1, snap_path = [];
  var bounds = new google.maps.LatLngBounds();
  traceroadTrip1.setMap(map);
  for (j = 0; j < roadTrip1.length - 1; j++) {
    service1.route({
      origin: roadTrip1[j],
      destination: roadTrip1[j + 1],
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        snap_path = snap_path.concat(result.routes[0].overview_path);
        traceroadTrip1.setPath(snap_path);
        for (var i = 0; i < traceroadTrip1.getPath().getLength(); i++) {
          bounds.extend(traceroadTrip1.getPath().getAt(i));
        }
        map.fitBounds(bounds);
      }
    });


  }

}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

【讨论】：