Question

我想在同一个谷歌地图中有多个不同风格的多个多边形。这是我到目前为止所拥有的。它只是一个概述西海岸的Polygon。

每当我尝试推送另一种不同风格的多边形时，我都会破坏页面。

如果我可以获得多组坐标来绘制单独的多边形，每个多边形具有不同的颜色，这将是理想的。

我离开百慕大三角坐标（来自谷歌API教程）尝试与西海岸坐标一起绘制。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Health South</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

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

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

  // Define the LatLng coordinates for the polygon's path.
  var westCoords = [
{lng: -124.208679, lat: 41.998284}, 
{lng: -111.049805, lat: 42.012571}, 
{lng: -111.044312, lat: 41.004775}, 
{lng: -102.062988, lat: 41.013066}, 
{lng: -102.052002, lat: 37.002553}, 
{lng: -103.007813, lat: 37.002553}, 
{lng: -103.007813, lat: 36.509636}, 
{lng: -103.095703, lat: 31.989442}, 
{lng: -106.413574, lat: 32.026706}, 
{lng: -106.457520, lat: 31.802893}, 
{lng: -108.204346, lat: 31.793555}, 
{lng: -108.226318, lat: 31.334871}, 
{lng: -111.071777, lat: 31.334871}, 
{lng: -114.818115, lat: 32.509762}, 
{lng: -114.796143, lat: 32.565333}, 
{lng: -114.812622, lat: 32.625497}, 
{lng: -114.719238, lat: 32.727220}, 
{lng: -117.130737, lat: 32.542183}, 
{lng: -117.163696, lat: 32.664813}, 
{lng: -117.199402, lat: 32.687931}, 
{lng: -117.237854, lat: 32.669437}, 
{lng: -117.265320, lat: 32.713355}, 
{lng: -117.259827, lat: 32.801128}, 
{lng: -117.281799, lat: 32.835751}, 
{lng: -117.259827, lat: 32.863439}, 
{lng: -117.292786, lat: 33.029390}, 
{lng: -117.339478, lat: 33.137551}, 
{lng: -117.498779, lat: 33.332823}, 
{lng: -117.765198, lat: 33.518499}, 
{lng: -118.119507, lat: 33.756315}, 
{lng: -118.311768, lat: 33.715202}, 
{lng: -118.427124, lat: 33.765449}, 
{lng: -118.438110, lat: 33.897777}, 
{lng: -118.493042, lat: 33.988918}, 
{lng: -118.784180, lat: 34.020795}, 
{lng: -119.152222, lat: 34.107256}, 
{lng: -119.355469, lat: 34.279914}, 
{lng: -119.608154, lat: 34.425036}, 
{lng: -120.437622, lat: 34.461277}, 
{lng: -120.651855, lat: 34.606085}, 
{lng: -120.684814, lat: 35.128894}, 
{lng: -120.904541, lat: 35.263562}, 
{lng: -120.893555, lat: 35.424868}, 
{lng: -121.464844, lat: 35.942436}, 
{lng: -121.948242, lat: 36.509636}, 
{lng: -121.794434, lat: 36.835668}, 
{lng: -122.003174, lat: 36.958671}, 
{lng: -122.376709, lat: 37.212832}, 
{lng: -122.508545, lat: 37.561997}, 
{lng: -122.508545, lat: 37.744657}, 
{lng: -122.750244, lat: 37.952861}, 
{lng: -122.926025, lat: 38.056742}, 
{lng: -123.717041, lat: 38.899583}, 
{lng: -123.750000, lat: 38.925229}, 
{lng: -123.717041, lat: 39.010648}, 
{lng: -123.793945, lat: 39.368279}, 
{lng: -123.804932, lat: 39.690281}, 
{lng: -124.244385, lat: 40.187267}, 
{lng: -124.365234, lat: 40.279526}, 
{lng: -124.409180, lat: 40.438586}, 
{lng: -124.156494, lat: 40.913513}, 
{lng: -124.178467, lat: 41.112469}, 
{lng: -124.068604, lat: 41.483891}, 
{lng: -124.244385, lat: 41.795888},
{lng: -124.208679, lat: 41.998284}  
  ];

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

  // Construct West polygon.
  var west = new google.maps.Polygon({
    paths: westCoords,
    strokeColor: '#7e7e7e',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#7e7e7e',
    fillOpacity: 0.55
  });
  west.setMap(map);
}


    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
  </body>
</html>

Answer 1

这应该有效

// Construct West polygon.
var west = new google.maps.Polygon({
   paths: westCoords,
   strokeColor: '#7e7e7e',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#7e7e7e',
   fillOpacity: 0.55
});
west.setMap(map);

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

Answer 2

回答了我自己的问题。找到了解决这个问题的方法吧！

{{1}}

一个Google地图上有多种颜色的多个多边形

2 个答案: