首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

代码语言:txt
复制
<!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的地图服务,可以在腾讯云官网上查找相关产品和产品介绍链接地址。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券