如何使用坐标数组在谷歌地图 API 中绘制多边形？答案

【问题标题】：how to draw a polygon in google map API using array of coordinates?如何使用坐标数组在谷歌地图 API 中绘制多边形？
【发布时间】：2016-07-22 13:27:44
【问题描述】：

我是 JavaScript 新手，我正在尝试使用 google map API 来绘制多边形。 google.maps.Polygons 函数中的默认路径接受以下格式的 JSON：

 var trianglecoords=[
           {lat: 18.466, lng: -66.518},
           {lat: 18.466, lng: -66.118},
           {lat: 18.166, lng: -66.118},
                 ];

但是我的格式是：

var trianglecoords=[
                   [18.466,-66.518],
                   [18.466,-66.118],
                   [18.166,-66.118],
                         ];

使用我的格式，我看不到地图中的三角形。谁能帮我？

这是我的代码：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    [25.774, -80.190],
    [18.466, -66.118],
    [32.321,-64.757],
    [25.774, -80.190]
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

【问题讨论】：

您的格式无效。您需要将其转换为 google.maps.LatLng 对象或 google.maps.LatLngLiteral 对象的数组。
谢谢！当我添加以下代码来创建 latlng 对象时，它起作用了： var points=[]; for(var i=0;i

标签： javascript json google-maps-api-3 polygon geospatial

【解决方案1】：

您的格式无效。您需要将其转换为 google.maps.LatLng 对象或 google.maps.LatLngLiteral 对象的数组。

要么：

var points=[]; 
for(var i=0; i<triangleCoords.length; i++) { 
  points.push(new google.maps.LatLng(triangleCoords[i][0],
                                     triangleCoords[i][1]));
}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
  paths: points,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});
bermudaTriangle.setMap(map);

或者：

var points=[]; 
for(var i=0; i<triangleCoords.length; i++) { 
  points.push({
    lat: triangleCoords[i][0],
    lng: triangleCoords[i][1]
  });
}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
  paths: points,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});
bermudaTriangle.setMap(map);

代码 sn-p：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 24.886,
      lng: -70.268
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    [25.774, -80.190],
    [18.466, -66.118],
    [32.321, -64.757],
    [25.774, -80.190]
  ];
  var points = [];
  for (var i = 0; i < triangleCoords.length; i++) {
    points.push({
      lat: triangleCoords[i][0],
      lng: triangleCoords[i][1]
    });
  }
  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: points,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, "load", initMap);

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

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

【讨论】：