如何制作带自定义区域的Web地图，可根据地址显示对应区域价格？

核心实现思路 #

你需求的功能完全可以通过Google Maps API实现，关键是把自定义区域（多边形Polygon）与价格数据绑定，结合地址解析、点-in-多边形判断逻辑来完成交互。

具体实现步骤 #

• 定义带属性的自定义区域
  不再仅绘制无属性的彩色多边形，给每个Polygon对象添加自定义价格属性。示例代码：

  // 定义带价格数据的自定义区域
  const customZone = new google.maps.Polygon({
    paths: [/* 区域经纬度坐标数组 */],
    strokeColor: "#FF7E2E",
    strokeOpacity: 0.9,
    strokeWeight: 2,
    fillColor: "#FF7E2E",
    fillOpacity: 0.3,
    // 绑定价格数据
    priceInfo: {
      monthlyRent: 4800,
      utilityBill: 750,
      propertyManagementFee: 280
    }
  });
  customZone.setMap(map);
  

• 地址转坐标（Geocoding）
  用户输入地址后，调用Geocoding API将地址转换为经纬度：

  const geocoder = new google.maps.Geocoder();
  geocoder.geocode({ address: 用户输入的地址 }, (results, status) => {
    if (status === "OK") {
      const targetPoint = results[0].geometry.location;
      // 执行区域判断与价格展示
      matchZoneAndShowPrice(targetPoint);
    }
  });
  

• 点-in-多边形判断与价格展示
  遍历所有自定义区域，用google.maps.geometry.poly.containsLocation()判断坐标所属区域，取出价格数据展示：

  function matchZoneAndShowPrice(latLng) {
    // 假设所有自定义区域存储在zones数组中
    zones.forEach(zone => {
      if (google.maps.geometry.poly.containsLocation(latLng, zone)) {
        // 用信息窗口展示价格
        const infoWindow = new google.maps.InfoWindow({
          content: `
            <div style="padding:8px;">
              <h4>区域价格详情</h4>
              <p>月租金：${zone.priceInfo.monthlyRent}元</p>
              <p>水电费：${zone.priceInfo.utilityBill}元</p>
              <p>物业费：${zone.priceInfo.propertyManagementFee}元</p>
            </div>
          `,
          position: latLng
        });
        infoWindow.open(map);
      }
    });
  }
  

• 区域点击交互优化
  给多边形添加点击事件，直接展示当前区域价格：

  customZone.addListener("click", (event) => {
    const infoWindow = new google.maps.InfoWindow({
      content: `
        <div style="padding:8px;">
          <h4>当前区域价格</h4>
          <p>月租金：${customZone.priceInfo.monthlyRent}元</p>
        </div>
      `,
      position: event.latLng
    });
    infoWindow.open(map);
  });
  

注意事项 #

• 加载Google Maps API时需包含geometry库（URL中追加&libraries=geometry）
• 自定义区域数量较多时，建议按地理范围分区优化遍历逻辑，提升性能
• 价格数据可从后端接口动态拉取，无需硬编码在前端

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