基于@react-google-maps/api修改Google Places默认标记图标及大小

问题说明 #

使用Next.js结合@react-google-maps/api开发项目时，地图默认POI（兴趣点）标记尺寸大、数量多，导致界面杂乱，希望改成类似打车应用的小型圆形标记，避免路线展示时混淆。

解决方案 #

通过Google Maps的**自定义地图样式（Map Styles）**可以直接修改POI标记的外观，无需额外获取POI数据，是最简洁高效的实现方式。

修改后代码及说明 #

import React from 'react';
import {
  GoogleMap,
  Marker,
  DirectionsRenderer,
  Circle,
  MarkerClusterer,
} from '@react-google-maps/api';
import { useMantineColorScheme } from '@mantine/core';
import { useLocation } from '@/app/dashboard-home/useLocation';
import { ICoordinates } from '@/interfaces/map';
import { ExposeRef } from '@/context/map-context';

type LatLngLiteral = google.maps.LatLngLiteral;
type DirectionsResult = google.maps.DirectionsResult;
type MapOptions = google.maps.MapOptions;

export default function Ground() {
  const [baseLocation, setBaseLocation] = React.useState<ICoordinates>();
  const { getUserLocation, errorMsg, loading } = useLocation();
  const { colorScheme } = useMantineColorScheme();
  const { mapRef } = React.useContext(ExposeRef) || {};

  React.useEffect(() => {
    async function fetchLocationInformation() {
      try {
        const userLocation = await getUserLocation();
        if (userLocation) {
          setBaseLocation(userLocation);
        }
      } catch (error) {
        console.log(errorMsg);
      }
    }
    fetchLocationInformation();
  }, []);

  const center = React.useMemo<LatLngLiteral | undefined>(
    () => (baseLocation ? { lat: baseLocation.latitude, lng: baseLocation.longitude } : undefined),
    [baseLocation]
  );

  // 自定义地图样式：修改POI标记为小型圆形
  const mapStyles = React.useMemo(() => [
    {
      featureType: "poi",
      elementType: "labels.icon",
      stylers: [
        // 隐藏默认图标
        { visibility: "off" }
      ]
    },
    {
      featureType: "poi",
      elementType: "labels.text",
      stylers: [
        // 可选：隐藏POI文字标签，进一步简化界面
        { visibility: "off" }
      ]
    },
    {
      featureType: "poi",
      elementType: "geometry",
      stylers: [
        // 设置POI为小型圆形
        { color: "#4285F4" }, // 自定义圆形颜色（示例为Google蓝）
        { shape: "circle" },
        { scale: 0.3 } // 缩放比例，0.3对应小型尺寸
      ]
    }
  ], []);

  const options = React.useMemo<MapOptions>(
    () => ({
      disableDefaultUI: false,
      clickableIcons: true,
      scrollwheel: true,
      mapId: colorScheme === 'dark' ? 'faaa827d36c66866' : '8660e06b8e3da749',
      styles: mapStyles // 加入自定义样式
    }),
    [colorScheme, mapStyles]
  );

  const onLoad = React.useCallback((map: any) => {
    if (mapRef) mapRef.current = map;
  }, []);

  if (errorMsg) {
    return <div>{errorMsg}</div>;
  }
  if (loading) {
    return <div>Loading...</div>;
  }
  const mapKey = colorScheme === 'dark' ? 'dark-map' : 'light-map';

  return (
    <>
      <GoogleMap
        key={mapKey}
        zoom={15}
        center={center}
        options={options}
        onLoad={onLoad}
        mapContainerStyle={{
          width: '100%',
          height: '87vh',
          position: 'relative',
          overflow: 'hidden',
        }}
      />
    </>
  );
}

代码说明 #

1. 自定义样式数组mapStyles：
   • 第一组规则：隐藏默认POI图标，替换为自定义圆形
   • 第二组规则：可选隐藏POI文字标签，进一步简化界面（若需要保留文字可删除此规则）
   • 第三组规则：设置POI的几何形状为圆形，自定义颜色和缩放比例（scale值越小，标记越小）
2. 将样式加入Map Options：在options对象中添加styles: mapStyles，让Google Maps应用自定义样式
3. 适配深色/浅色模式：如果需要针对不同配色方案调整POI颜色，可以在mapStyles中根据colorScheme动态修改color值

进阶调整 #

如果需要更精细的控制（比如不同类型POI用不同颜色），可以在mapStyles中添加featureType的细分规则，例如：

• poi.business：商业场所
• poi.government：政府机构
• poi.park：公园绿地

示例：

{
  featureType: "poi.business",
  elementType: "geometry",
  stylers: [
    { color: "#EA4335" }, // 商业场所用红色圆形
    { shape: "circle" },
    { scale: 0.3 }
  ]
}

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