如何为Google Maps中的Circle对象创建可复用样式？

当然可以！这是个非常棒的代码复用思路，既能减少重复代码，还能让后续样式维护变得更轻松。咱们只需要把重复的样式属性抽成一个独立的配置对象，每次创建新Circle时直接复用它就行。

步骤1：定义基础样式对象 #

先把你重复使用的fillColor、fillOpacity等属性封装成一个单独的对象：

// 可复用的Circle基础样式
const circleBaseStyle = {
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 0,
  fillColor: '#FF0000',
  fillOpacity: 0.35
};

步骤2：创建Circle时复用样式 #

有两种常用的方式来复用这个样式对象，你可以根据习惯选择：

方式一：使用扩展运算符（ES6+） #

这是最简洁的写法，用...把基础样式的属性展开到新的配置对象里，还能按需覆盖或添加新属性：

// 创建第一个圆
const circle1 = new google.maps.Circle({
  ...circleBaseStyle, // 复用基础样式
  map: map,
  center: {lat: 41.7141904, lng: -87.643531},
  radius: 50
});

// 创建第二个圆，同时覆盖基础样式的fillColor
const circle2 = new google.maps.Circle({
  ...circleBaseStyle,
  map: map,
  center: {lat: 41.720000, lng: -87.650000},
  radius: 100,
  fillColor: '#00FF00' // 把填充色改成绿色
});

方式二：使用Object.assign() #

如果你的环境不支持ES6扩展运算符，可以用Object.assign()来合并对象：

// 创建第三个圆
const circle3 = new google.maps.Circle(
  Object.assign({}, circleBaseStyle, {
    map: map,
    center: {lat: 41.700000, lng: -87.630000},
    radius: 75
  })
);

额外小技巧 #

如果以后需要调整所有Circle的样式（比如把填充透明度改成0.5），只需要修改circleBaseStyle里的fillOpacity值，所有复用了这个样式的Circle都会自动生效，不用一个个修改，大大提升维护效率！

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