如何在同一张谷歌地图上创建多个多边形？

Question

我有以下坐标：

 var singida = [
        new google.maps.LatLng(-6.926427,33.464355),
        new google.maps.LatLng(-7.057282,33.662109),
        new google.maps.LatLng(-7.122696,33.750000),
        new google.maps.LatLng(-7.209900,33.771973),
        new google.maps.LatLng(-7.471411,33.750000),
        new google.maps.LatLng(-7.536764,33.793945),
        new google.maps.LatLng(-7.536764,33.969727)];


 var Tabora = [
        new google.maps.LatLng(-4.127285,31.684570),
        new google.maps.LatLng(-4.236856,31.684570),
        new google.maps.LatLng(-4.258768,31.508789),
        new google.maps.LatLng(-4.236856,31.486816),
        new google.maps.LatLng(-4.302591,31.464844),
        new google.maps.LatLng(-4.477856,31.420898),
        new google.maps.LatLng(-4.631179,31.464844)];

我该如何在同一地图上绘制两个多边形？ 我下面的代码仅适用于单个多边形。

 var flightPath = new google.maps.Polygon({
        path: singida,
        geodesic: false,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 1
    });

- Malouda

Answer 1

只需制作两个单独的多边形，每个多边形都包含一个路径。这对我有效：

var singida = [
new google.maps.LatLng(-6.926427, 33.464355),
new google.maps.LatLng(-7.057282, 33.662109),
new google.maps.LatLng(-7.122696, 33.750000),
new google.maps.LatLng(-7.209900, 33.771973),
new google.maps.LatLng(-7.471411, 33.750000),
new google.maps.LatLng(-7.536764, 33.793945),
new google.maps.LatLng(-7.536764, 33.969727)];


var Tabora = [
new google.maps.LatLng(-4.127285, 31.684570),
new google.maps.LatLng(-4.236856, 31.684570),
new google.maps.LatLng(-4.258768, 31.508789),
new google.maps.LatLng(-4.236856, 31.486816),
new google.maps.LatLng(-4.302591, 31.464844),
new google.maps.LatLng(-4.477856, 31.420898),
new google.maps.LatLng(-4.631179, 31.464844)];

var polygon1 = new google.maps.Polygon({
    path: singida,
    geodesic: false,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    map: map
});

var polygon2 = new google.maps.Polygon({
    path: Tabora,
    geodesic: false,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    map: map
});

(但看起来路径中的坐标顺序错乱，缺少点或未正确闭合)

另一个选项是创建多边形数组。

代码片段：

var bounds = new google.maps.LatLngBounds();

var geocoder;
var map;
var polygons = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var singida = [
    new google.maps.LatLng(-6.926427, 33.464355),
    new google.maps.LatLng(-7.057282, 33.662109),
    new google.maps.LatLng(-7.122696, 33.750000),
    new google.maps.LatLng(-7.209900, 33.771973),
    new google.maps.LatLng(-7.471411, 33.750000),
    new google.maps.LatLng(-7.536764, 33.793945),
    new google.maps.LatLng(-7.536764, 33.969727)
  ];


  var Tabora = [
    new google.maps.LatLng(-4.127285, 31.684570),
    new google.maps.LatLng(-4.236856, 31.684570),
    new google.maps.LatLng(-4.258768, 31.508789),
    new google.maps.LatLng(-4.236856, 31.486816),
    new google.maps.LatLng(-4.302591, 31.464844),
    new google.maps.LatLng(-4.477856, 31.420898),
    new google.maps.LatLng(-4.631179, 31.464844)
  ];

  polygons.push(new google.maps.Polygon({
    path: singida,
    geodesic: false,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    map: map
  }));
  polygons.push(new google.maps.Polygon({
    path: Tabora,
    geodesic: false,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    map: map
  }));
  for (var j = 0; j < polygons.length; j++) {
    for (var i = 0; i < polygons[j].getPath().getLength(); i++) {
      bounds.extend(polygons[j].getPath().getAt(i));
    }
  }

  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

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

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

- geocodezip

Answer 2

谷歌地图提供了多边形的多个功能。

    var singida = [
new google.maps.LatLng(-6.926427, 33.464355),
new google.maps.LatLng(-7.057282, 33.662109),
new google.maps.LatLng(-7.122696, 33.750000),
new google.maps.LatLng(-7.209900, 33.771973),
new google.maps.LatLng(-7.471411, 33.750000),
new google.maps.LatLng(-7.536764, 33.793945),
new google.maps.LatLng(-7.536764, 33.969727)];


var Tabora = [
new google.maps.LatLng(-4.127285, 31.684570),
new google.maps.LatLng(-4.236856, 31.684570),
new google.maps.LatLng(-4.258768, 31.508789),
new google.maps.LatLng(-4.236856, 31.486816),
new google.maps.LatLng(-4.302591, 31.464844),
new google.maps.LatLng(-4.477856, 31.420898),
new google.maps.LatLng(-4.631179, 31.464844)];

var polygon1 = new google.maps.Polygon({
    paths: [singida, Tabora],
    geodesic: false,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    map: map
});

非常简单，创建多个数组变量并将它们添加到路径数组中。

- Sumit Kumar Gupta

Answer 3

你可以使用多边形洞，将第二个（或其他）多边形的位置设置在第一个多边形外部。

多边形洞: https://developers.google.com/maps/documentation/javascript/examples/polygon-hole 示例：打开上面的链接，并将坐标设置如下：

// Define the LatLng coordinates for the polygon's  outer path.
var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
];

// Define the LatLng coordinates for the polygon's inner path.
// Note that the points forming the inner path are wound in the
// opposite direction to those in the outer path, to form the hole.
var innerCoords = [
    {lat: 35.745, lng: -70.579},
    {lat: 38.570, lng: -67.514},
    {lat: 36.570, lng: -64.255},
    {lat: 33.339, lng: -66.668}
];

它将在同一图像中创建两个或更多的多边形。

[]的。

- brbmendes