以此格式在 google 地图中构建多边形

Question

我正在尝试在 google 地图中显示多边形。我有一个 .xlsx 文件，其中有一列名为 "polygon"，其中是一种奇怪格式的多边形坐标。

例如：[[], [[-68.0913, -38.95585], [-68.09148, -38.95666], [-68.07378, -38.9591], [-68.0393, -38.96023], [-68.03909, -38.95884], [-68.03909, -38.95517], [-68.03273, -38.95452], [-68.03288, -38.95122], [-68.03322, -38.94787], [-68.04327, -38.94201], [-68.06786, -38.93913], [-68.07294, -38.94037], [-68.07719, -38.94237], [-68.07908, -38.94347], [-68.08127, -38.94434], [-68.08457, -38.94739], [-68.1084, -38.9478], [-68.10842, -38.95442], [-68.0914, -38.9549], [-68.09136, -38.95559], [-68.09123, -38.95594]], [[-68.11045, -38.95312]], [[-68.09643, -38.96523], [-68.0967, -38.95809], [-68.09688, -38.95342], [-68.07472, -38.95842], [-68.04073, -38.95897], [-68.03989, -38.95899], [-68.03897, -38.95901], [-68.0391, -38.96296], [-68.04457, -38.96303], [-68.04461, -38.96304], [-68.04488, -38.97065], [-68.04485, -38.97065], [-68.04489, -38.97132], [-68.05176, -38.97112], [-68.05704, -38.97265], [-68.05725, -38.97858], [-68.06837, -38.97866], [-68.06886, -38.97315], [-68.06901, -38.96554], [-68.07631, -38.96542]]].

是否可以使用此数据结构构建多边形或者格式不正确？

Answer 1

您的数据是类似 GeoJSON 的坐标格式。

将其转换为 Google 地图多边形：

// go through the outer array (of polygons)
for (var i = 0; i < coords.length; i++) {
    // array for the LatLng coordinates
    var polygonCoords = [];
    // go through each coordinate in the array.
    // GeoJSON is [longitude,latitude]
    for (var j = 0; j < coords[i].length; j++) {
      var pt = new google.maps.LatLng(coords[i][j][1], coords[i][j][0])
      polygonCoords.push(pt);
    }
    // Construct the polygon.
    var polygon = new google.maps.Polygon({
      paths: polygonCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map
    });
  }
}

proof of concept fiddle

代码片段：

// This example creates a simple polygon representing the Bermuda Triangle.

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

  var coords = [[], [[-68.0913, -38.95585], [-68.09148, -38.95666], [-68.07378, -38.9591], [-68.0393, -38.96023], [-68.03909, -38.95884], [-68.03909, -38.95517], [-68.03273, -38.95452], [-68.03288, -38.95122], [-68.03322, -38.94787], [-68.04327, -38.94201], [-68.06786, -38.93913], [-68.07294, -38.94037], [-68.07719, -38.94237], [-68.07908, -38.94347], [-68.08127, -38.94434], [-68.08457, -38.94739], [-68.1084, -38.9478], [-68.10842, -38.95442], [-68.0914, -38.9549], [-68.09136, -38.95559], [-68.09123, -38.95594]], [[-68.11045, -38.95312]], [[-68.09643, -38.96523], [-68.0967, -38.95809], [-68.09688, -38.95342], [-68.07472, -38.95842], [-68.04073, -38.95897], [-68.03989, -38.95899], [-68.03897, -38.95901], [-68.0391, -38.96296], [-68.04457, -38.96303], [-68.04461, -38.96304], [-68.04488, -38.97065], [-68.04485, -38.97065], [-68.04489, -38.97132], [-68.05176, -38.97112], [-68.05704, -38.97265], [-68.05725, -38.97858], [-68.06837, -38.97866], [-68.06886, -38.97315], [-68.06901, -38.96554], [-68.07631, -38.96542]]];


  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < coords.length; i++) {
    var polygonCoords = [];
    for (var j = 0; j < coords[i].length; j++) {
      var pt = new google.maps.LatLng(coords[i][j][1], coords[i][j][0])
      bounds.extend(pt);
      polygonCoords.push(pt);
    }
    // Construct the polygon.
    var polygon = new google.maps.Polygon({
      paths: polygonCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map
    });
  }
  map.fitBounds(bounds);
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

以此格式在 google 地图中构建多边形

Build polygon in google maps from this format

google-maps

polygon