如何在React+TypeScript项目的Google Maps API中移除地点标识

解决方案 #

你需要通过自定义Google Maps的样式规则来隐藏地点标识（POI标记），操作步骤如下：

1. 先定义隐藏POI标签的样式配置：

const hidePoiStyles = [
  {
    featureType: "poi",
    elementType: "labels",
    stylers: [{ visibility: "off" }]
  }
];

如果你连POI的图标也需要一起隐藏，可以把elementType的值改为"all"。
2. 将样式配置传入Map组件的options属性中，修改后的组件代码如下：

<Map 
  streetViewControl={false}
  mapTypeId="roadmap"
  mapTypeControl={false} 
  center={newCenter} 
  zoom={zoom} 
  style={{ flexGrow: "1", height: "100%" }}
  options={{ styles: hidePoiStyles }}
></Map>

以上配置对绝大多数React Google Maps封装库都适用，配置完成后地图上的商业地点、公共设施等标识就会全部隐藏。

内容的提问来源于stack exchange，提问作者Davi Cheli Miquelim