我刚好做过类似的Google Maps交互功能，给你整理一套完整的实现方案，直接就能复用：

1. 核心流程梳理 #

用户点击区域标记 → 打开信息窗口 → 点击窗口内按钮 → 绘制对应多边形 → 检查多边形方向 → 自动调整地图视野到多边形范围 → 执行区域搜索

2. 完整代码实现 #

第一步：定义区域数据结构

先把你的区域标记和对应多边形点集整理成结构化数据，方便批量处理：

// 示例区域数据，替换成你实际的数十个区域
const regions = [
  {
    id: "region-1",
    markerPos: { lat: 37.7749, lng: -122.4194 },
    polygonPoints: [
      { lat: 37.772, lng: -122.419 },
      { lat: 37.776, lng: -122.419 },
      { lat: 37.776, lng: -122.415 },
      { lat: 37.772, lng: -122.415 }
    ],
    name: "旧金山市区"
  },
  // 更多区域...
];

第二步：初始化地图并创建标记

遍历区域数据，生成标记和带操作按钮的信息窗口：

// 初始化地图实例
const map = new google.maps.Map(document.getElementById("map-container"), {
  center: { lat: 37.7749, lng: -122.4194 },
  zoom: 12
});

// 批量创建区域标记与信息窗口
regions.forEach(region => {
  // 创建区域标记
  const marker = new google.maps.Marker({
    position: region.markerPos,
    map: map,
    title: region.name
  });

  // 构建信息窗口内容，包含搜索按钮
  const infowindow = new google.maps.InfoWindow({
    content: `
      <div style="padding: 8px;">
        <h4>${region.name}</h4>
        <button class="region-search-btn" data-region-id="${region.id}">执行区域内搜索</button>
      </div>
    `
  });

  // 标记点击事件：打开信息窗口
  marker.addListener("click", () => {
    infowindow.open(map, marker);
    // 延迟绑定按钮事件，确保DOM元素已渲染
    setTimeout(() => {
      const searchBtn = document.querySelector(`.region-search-btn[data-region-id="${region.id}"]`);
      if (searchBtn) {
        searchBtn.addEventListener("click", () => handleRegionAction(region.polygonPoints));
      }
    }, 50);
  });
});

第三步：核心处理函数（绘制多边形+检查方向+调整视野）

定义handleRegionAction函数，处理按钮点击后的所有核心逻辑：

let activePolygon = null; // 保存当前活跃多边形，避免地图图形堆积

function handleRegionAction(polygonPoints) {
  // 1. 清除之前的多边形（如果存在）
  if (activePolygon) {
    activePolygon.setMap(null);
  }

  // 2. 在地图上绘制目标多边形
  activePolygon = new google.maps.Polygon({
    paths: polygonPoints,
    strokeColor: "#2196F3",
    strokeOpacity: 0.9,
    strokeWeight: 2,
    fillColor: "#2196F3",
    fillOpacity: 0.2,
    map: map
  });

  // 3. 检查多边形是否为顺时针定义
  const isClockwise = checkPolygonDirection(polygonPoints);
  console.log(`当前多边形${isClockwise ? '是' : '不是'}顺时针方向`);

  // 4. 自动调整地图视野到多边形范围
  const bounds = new google.maps.LatLngBounds();
  polygonPoints.forEach(point => bounds.extend(point));
  map.fitBounds(bounds);

  // 5. 执行你的区域内搜索逻辑
  runInRegionSearch(polygonPoints);
}

第四步：辅助函数实现

• 检查多边形方向的函数（基于面积符号判断，是Google Maps生态常用方法）：

function checkPolygonDirection(points) {
  let areaSum = 0;
  const pointCount = points.length;

  for (let i = 0; i < pointCount; i++) {
    const currPoint = points[i];
    const nextPoint = points[(i + 1) % pointCount];
    areaSum += (nextPoint.lng - currPoint.lng) * (nextPoint.lat + currPoint.lat);
  }

  // 总和为正 → 顺时针；总和为负 → 逆时针
  return areaSum > 0;
}

• 你的区域内搜索函数（替换成实际业务逻辑）：

function runInRegionSearch(polygonPoints) {
  // 这里写入你的区域搜索逻辑，比如查询范围内的POI、自定义数据点等
  console.log(`开始在区域内搜索，多边形点集：`, polygonPoints);
}

关键细节说明 #

• 用activePolygon变量管理当前多边形，避免重复绘制导致地图混乱；
• 信息窗口按钮延迟绑定是因为窗口DOM是动态生成的，需等待渲染完成才能获取元素；
• fitBounds方法会自动计算多边形的最小包围盒，让地图视野刚好覆盖整个区域，提升用户体验；
• 多边形方向检查可用于后续地理围栏判断、数据筛选等场景，是很多空间交互的基础。

内容的提问来源于stack exchange，提问作者user2470281