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

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

（但看起来路径中的坐标乱序，缺少点或没有正确关闭）

另一种选择是制作多边形数组。

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

它将在同一张图像上制作两个或更多多边形。

[]的

Answer 3

谷歌地图提供了多个多边形的特征。

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

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

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

3 个答案: