Question

我试图将几个坐标推到一个数组，然后用这些点绘制一个多边形。我的代码看起来像

             var path = [];
             var polyLatLng1 = new google.maps.LatLng(8.65, 12.74);
             path.push(polyLatLng1);
             var polyLatLng2 = new google.maps.LatLng(23.8, 34.87);
             path.push(polyLatLng2);
             var polyLatLng3 = new google.maps.LatLng(4.16, 21.04);
             path.push(polyLatLng3);
             polygon = new google.maps.Polygon({
                paths: path,
                fillColor: '#1E90FF',
                strokeWeight: 0,
                fillOpacity: 0.45,
              });

但这根本不会绘制多边形。谢谢你的帮助！

Answer 1

您需要将多边形添加到地图中：

polygon = new google.maps.Polygon({
    paths: path,
    fillColor: '#1E90FF',
    strokeWeight: 0,
    fillOpacity: 0.45,
    map: map
 });

working fiddle

工作代码段：

＆＃13;

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 2,
    center: {
      lat: -28,
      lng: 137.883
    }
  });

  var path = [];
  var bounds = new google.maps.LatLngBounds();

  var polyLatLng1 = new google.maps.LatLng(8.65, 12.74);
  path.push(polyLatLng1);
  bounds.extend(polyLatLng1);
  var polyLatLng2 = new google.maps.LatLng(23.8, 34.87);
  path.push(polyLatLng2);
  bounds.extend(polyLatLng2);
  var polyLatLng3 = new google.maps.LatLng(4.16, 21.04);
  path.push(polyLatLng3);
  bounds.extend(polyLatLng3);
  polygon = new google.maps.Polygon({
    paths: path,
    fillColor: '#1E90FF',
    strokeWeight: 0,
    fillOpacity: 0.45,
    map: map
  });
  map.fitBounds(bounds);

}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

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

＆＃13;

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

＆＃13;

将坐标推送到路径数组

1 个答案: