在Google地图上显示多个多边形，并切换每个多边形的可见性

，可以通过Google Maps JavaScript API来实现。

首先，需要在HTML页面中引入Google Maps JavaScript API的库文件，并创建一个地图容器：

<!DOCTYPE html>
<html>
<head>
  <title>Google Maps Polygon</title>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  <script>
    var map;

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 37.7749, lng: -122.4194}, // 设置地图中心点的经纬度
        zoom: 12 // 设置地图缩放级别
      });

      // 创建多个多边形
      var polygon1 = new google.maps.Polygon({
        paths: [
          {lat: 37.7749, lng: -122.4194},
          {lat: 37.7749, lng: -122.4316},
          {lat: 37.7833, lng: -122.4316},
          {lat: 37.7833, lng: -122.4194}
        ],
        strokeColor: '#FF0000', // 设置边框颜色
        strokeOpacity: 0.8, // 设置边框透明度
        strokeWeight: 2, // 设置边框宽度
        fillColor: '#FF0000', // 设置填充颜色
        fillOpacity: 0.35 // 设置填充透明度
      });

      var polygon2 = new google.maps.Polygon({
        paths: [
          {lat: 37.7749, lng: -122.4094},
          {lat: 37.7749, lng: -122.4216},
          {lat: 37.7833, lng: -122.4216},
          {lat: 37.7833, lng: -122.4094}
        ],
        strokeColor: '#00FF00',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#00FF00',
        fillOpacity: 0.35
      });

      // 将多边形添加到地图上
      polygon1.setMap(map);
      polygon2.setMap(map);

      // 切换多边形的可见性
      document.getElementById('togglePolygon1').addEventListener('click', function() {
        if (polygon1.getMap()) {
          polygon1.setMap(null);
        } else {
          polygon1.setMap(map);
        }
      });

      document.getElementById('togglePolygon2').addEventListener('click', function() {
        if (polygon2.getMap()) {
          polygon2.setMap(null);
        } else {
          polygon2.setMap(map);
        }
      });
    }
  </script>
  <button id="togglePolygon1">Toggle Polygon 1</button>
  <button id="togglePolygon2">Toggle Polygon 2</button>
</body>
</html>

上述代码中，首先创建了一个地图容器，并引入了Google Maps JavaScript API的库文件。然后，在initMap函数中，创建了两个多边形，并设置了它们的属性，如边框颜色、填充颜色等。接着，将多边形添加到地图上，并通过按钮的点击事件来切换多边形的可见性。

需要注意的是，上述代码中的YOUR_API_KEY需要替换为你自己的Google Maps API密钥。

推荐的腾讯云相关产品是腾讯地图开放平台，它提供了类似Google Maps的地图服务，可以在腾讯云官网上查找相关产品和产品介绍链接地址。

在Google地图上显示多个多边形，并切换每个多边形的可见性

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐