将坐标推送到路径数组

Pushing coordinates to path array

本文关键字：路径 数组 坐标      更新时间：2023-09-26

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

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

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

您需要将面添加到地图中：

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

工作小提琴

工作代码片段：

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);
html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

相关文章：