Google maps API JAVASCRIPT -添加更多矩形(动态)

Google Maps API JavaScript是一种用于在网页上集成Google地图功能的编程接口。它提供了一系列的JavaScript类和方法，使开发人员能够在网页上显示地图、标记位置、绘制图形、添加交互功能等。

在Google Maps API JavaScript中，要添加更多矩形（动态），可以使用以下步骤：

创建地图对象：使用google.maps.Map类创建一个地图对象，并指定地图的容器元素和初始配置选项。
创建矩形对象：使用google.maps.Rectangle类创建一个矩形对象，并指定矩形的位置、大小、样式等属性。
将矩形添加到地图：使用setMap方法将矩形对象添加到地图上，即将矩形显示在地图上。
动态添加更多矩形：可以通过监听用户的交互事件（例如点击按钮）或根据其他条件，在需要的时候动态创建新的矩形对象，并将其添加到地图上。

以下是一个简单的示例代码，演示如何使用Google Maps API JavaScript添加更多矩形：

// 创建地图对象
var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 37.7749, lng: -122.4194},
  zoom: 12
});

// 创建矩形对象
var rectangle = new google.maps.Rectangle({
  bounds: {
    north: 37.8,
    south: 37.7,
    east: -122.3,
    west: -122.4
  },
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  strokeWeight: 2,
  map: map
});

// 动态添加更多矩形
function addRectangle() {
  var newRectangle = new google.maps.Rectangle({
    bounds: {
      north: 37.9,
      south: 37.8,
      east: -122.2,
      west: -122.3
    },
    fillColor: '#00FF00',
    fillOpacity: 0.35,
    strokeWeight: 2,
    map: map
  });
}

// 监听按钮点击事件，动态添加更多矩形
document.getElementById('addRectangleButton').addEventListener('click', addRectangle);

在上述示例中，首先创建了一个地图对象，并指定了地图的中心点和缩放级别。然后创建了一个初始的矩形对象，并将其添加到地图上。接着定义了一个addRectangle函数，用于动态创建新的矩形对象，并将其添加到地图上。最后通过监听按钮的点击事件，调用addRectangle函数来实现动态添加更多矩形。