如何在Google Maps V3中将普通矩形修改为圆角矩形？

嗨，这个问题我刚好折腾过！Google Maps自带的Rectangle组件确实没提供圆角属性，不过咱们完全可以用Polygon来手动绘制带圆角的矩形，效果和原生矩形一样自然，还能自定义圆角大小。

核心思路 #

圆角矩形本质是4条直线段 + 4段圆弧的组合，我们可以通过计算圆角的圆弧路径点，把这些点和矩形的边组合起来，作为Polygon的路径参数，就能模拟出圆角效果了。这里会用到Google Maps的geometry库中的computeOffset方法，帮咱们快速计算圆弧上的坐标点。

具体实现步骤 #

1. 引入Geometry库
   加载Google Maps脚本时，记得加上&libraries=geometry，不然没法用坐标偏移计算的方法：

   <script src="https://maps.googleapis.com/maps/api/js?key=你的API_KEY&libraries=geometry"></script>
   

2. 编写圆角路径生成函数
   这个函数接收矩形的bounds（边界）和圆角radius（半径），返回完整的圆角矩形路径点数组：

   function createRoundedRectanglePath(bounds, radius) {
     // 获取矩形四个顶点的坐标
     const ne = bounds.getNorthEast();
     const nw = new google.maps.LatLng(ne.lat(), bounds.getSouthWest().lng());
     const sw = bounds.getSouthWest();
     const se = new google.maps.LatLng(sw.lat(), ne.lng());
   
     // 定义四个圆角的方向角度（以正北为0度，顺时针计算）
     const cornerAngles = [135, 45, 315, 225];
     const corners = [nw, ne, se, sw];
     const path = [];
   
     // 生成每个圆角的圆弧点（这里用4个点来模拟圆弧，点越多越平滑）
     const arcPoints = 4;
     corners.forEach((corner, index) => {
       // 计算圆弧的起始和结束角度
       const startAngle = cornerAngles[index] - 45;
       const endAngle = cornerAngles[index] + 45;
       const angleStep = (endAngle - startAngle) / arcPoints;
   
       // 生成圆弧上的每个点
       for (let i = 0; i <= arcPoints; i++) {
         const angle = startAngle + (i * angleStep);
         const point = google.maps.geometry.spherical.computeOffset(corner, radius, angle);
         path.push(point);
       }
     });
   
     // 闭合路径
     path.push(path[0]);
     return path;
   }
   

3. 替换原Rectangle为Polygon
   把你原来创建Rectangle的代码，改成用Polygon，并传入生成的圆角路径：

   // 假设你已经有了map实例和bounds
   const bounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(39.9042, 116.4074), // 西南角坐标
     new google.maps.LatLng(39.9142, 116.4174)  // 东北角坐标
   );
   const cornerRadius = 500; // 圆角半径，单位是米
   
   // 创建圆角矩形Polygon
   const roundedRectangle = new google.maps.Polygon({
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 2,
     fillColor: '#575757',
     fillOpacity: 0.35,
     map: map,
     paths: createRoundedRectanglePath(bounds, cornerRadius)
   });
   

额外小提示 #

• 如果觉得圆弧不够平滑，可以增加arcPoints的数值（比如改成8），不过数值越高性能消耗也会略增，一般4个点就足够自然了。
• 圆角半径别设置太大，超过矩形最短边的一半会出现变形，建议根据实际地图缩放级别调整。
• 如果需要动态修改圆角大小或者矩形边界，只需要重新调用createRoundedRectanglePath生成新路径，然后执行roundedRectangle.setPaths(新路径)即可。

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