如何解决Google Maps添加标记时Do not use 'new' for side effects报错

这个报错是因为你使用new关键字创建google.maps.Marker实例后没有将引用赋值给任何变量，linter默认不允许仅依赖new操作的副作用（这里的副作用就是标记自动挂载到地图上）。以下是不同优先级的解决方案：

方案1：存储标记引用（最推荐） #

这个方案不仅可以解决linter报错，还方便后续对标记做操作（比如批量移除、更新位置、绑定点击事件等），是生产环境的最佳实践。

首先在你的类中声明一个存储标记的数组属性：

// 类属性声明
markers: google.maps.Marker[] = [];

然后修改setMarkers方法，把创建的标记存入数组：

setMarkers(map: google.maps.Map) {
  // 先清空已有标记避免重复添加，可选，根据业务需求调整
  this.markers.forEach(marker => marker.setMap(null));
  this.markers = [];

  for (let i = 0; i < this.providerList.length; i++) {
    const marker = this.providerList[i];
    // 将新创建的标记存入数组
    this.markers.push(new google.maps.Marker({
      position: { lat: marker.latitude, lng: marker.longitude },
      map,
      title: marker.name,
    }));
  }
}

方案2：显式声明丢弃引用 #

如果你确定后续不需要操作这些标记，不需要保留引用，可以用void操作符明确告诉linter你是故意丢弃返回值，不需要警告：

setMarkers(map: google.maps.Map) {
  for (let i = 0; i < this.providerList.length; i++) {
    const marker = this.providerList[i];
    // 加void前缀显式告知linter忽略返回值
    void new google.maps.Marker({
      position: { lat: marker.latitude, lng: marker.longitude },
      map,
      title: marker.name,
    });
  }
}

方案3：临时关闭linter规则（不推荐） #

如果只是想快速消掉报错，不想改代码逻辑，可以在报错行上方加linter忽略注释：

// eslint-disable-next-line no-new
new google.maps.Marker({
  position: { lat: marker.latitude, lng: marker.longitude },
  map,
  title: marker.name,
});

这个方案仅适合临时调试使用，生产环境不建议随意关闭linter规则。

补充说明：官方示例代码没有做相关处理，是因为示例仅追求最小可运行效果，没有对接入项目的linter规则做适配，实际业务开发中按照上述方案调整即可。

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