如何在Google Maps JS API中默认启用卫星视图标签？

卫星地图默认不显示标签是因为纯卫星视图（satellite）不包含标签图层，你需要使用**混合视图（hybrid）**来同时显示卫星影像和标签。另外，你代码里标记点的标题属性设置有误，需要修正。

修改后的代码示例 #

const GoogleMap = ({
  coords,
  markerTitle = "Marker",
  zoom = 15,
  mapType = "hybrid", // 切换为混合视图
  className = "",
}) => {
  const mapRef = useRef(null);

  useEffect(() => {
    if (coords) {
      const loader = new Loader({
        apiKey: API_KEY,
        version: "weekly",
      });
      let map;
      if (mapRef.current) {
        const { latitude: lat, longitude: lng } = coords;
        loader.load().then(() => {
          map = new google.maps.Map(mapRef.current, {
            center: { lat, lng },
            zoom,
            mapTypeId: mapType,
          });
          new google.maps.Marker({
            position: { lat, lng },
            map,
            title: markerTitle, // 修正为正确的title属性
          });
        });
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [coords]);
  // ... 其余组件代码
};

关键说明 #

• 切换混合视图：hybrid类型是官方提供的卫星影像+标签的组合视图，直接设置就能默认显示所有标准标签，是最便捷的方案。
• 修正标记点标题：Google Maps Marker的标题属性是title，不是自定义的markerTitle，修改后鼠标悬停标记点时会正常显示标题文本。

如果必须保留纯卫星视图，也可以通过自定义地图样式选择性开启标签：

map = new google.maps.Map(mapRef.current, {
  center: { lat, lng },
  zoom,
  mapTypeId: "satellite",
  styles: [
    {
      featureType: "administrative",
      elementType: "labels",
      stylers: [{ visibility: "on" }]
    },
    {
      featureType: "road",
      elementType: "labels",
      stylers: [{ visibility: "on" }]
    },
    {
      featureType: "poi",
      elementType: "labels",
      stylers: [{ visibility: "on" }]
    }
  ]
});

这种方式可以单独控制不同类型标签的显示，但不如直接使用hybrid视图的体验流畅，因为混合视图是官方优化过的标签叠加逻辑。

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