Question

我正在尝试填充一条以折线为道路的折线为边界的区域。这是我的代码：

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并不太熟悉，我希望从折叠到道路的折线创建多边形很容易。一旦我有一个多边形，我想为该区域着色。

感谢您的帮助。

Answer 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

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Google Maps JavaScript API - 从折线到道路创建多边形

1 个答案: