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

How to create multiple polygons on the same google map?

本文关键字：创建 多边形 谷歌地图 同一个      更新时间：2023-09-26

我有以下坐标：

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

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

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>

您可以使用"多边形孔"，设置第一个多边形之外的第二个（或另一个）多边形的位置。

多边形孔：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}
];

它将在同一图像上生成两个或多个多边形。

[]的

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

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

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

相关文章：