解决Google Maps DirectionsRenderer覆盖自定义Marker问题：如何显示自定义标记？

问题核心：你配置的自定义取货点、配送点Marker被DirectionsRenderer的默认标记覆盖，只需通过suppressMarkers属性关闭DirectionsRenderer的默认标记渲染，就能让自定义Marker正常显示。

具体解决步骤 #

• 在<DirectionsRenderer>组件中添加suppressMarkers={true}属性，禁用其自带的起点/终点标记
• 保留你已实现的自定义<Marker>组件，它们会在地图上正常渲染且不会被覆盖

修改后的完整代码 #

"use client";
import React,{useEffect,useState} from 'react'
import { GoogleMap, useJsApiLoader,Marker,DirectionsRenderer } from '@react-google-maps/api';
import { DeliveryData } from '@/lib/types';
const containerStyle = {
  width: '400px',
  height:'400px '
};

let directionsService: google.maps.DirectionsService;

function MapContainer({ deliveryData }: { deliveryData: DeliveryData }) {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ""
  });
  
  const pickupCoordinates = {
    lat: -33.8827923,
    lng: 151.1959758
  }

  const deliveryCoordinates = {
    lat: -33.8876642,
    lng: 151.2086783
  }
  
  const [deliveryGuyPosition, setDeliveryGuyPosition] = useState(deliveryCoordinates);
  const [directions, setDirections] = useState<google.maps.DirectionsResult | null>(null);
  
  const [_, setMap] = React.useState<google.maps.Map | null>(null)

  const onLoad = React.useCallback(function callback(map: google.maps.Map) {
    const bounds = new window.google.maps.LatLngBounds();
    directionsService = new google.maps.DirectionsService();
    bounds.extend(deliveryCoordinates);
    bounds.extend(pickupCoordinates);
    map.fitBounds(bounds);    
    changeDirection(pickupCoordinates, deliveryCoordinates);
    setMap(map)
  }, []);

  const changeDirection = (origin: any, destination: any) => {
    directionsService.route(
      {
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
      },
      (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          setDirections(result);
        } else {
          console.error(`Error fetching directions ${result}`);
        }
      }
    );
  };

  const onUnmount = React.useCallback(function callback() {
    setMap(null)
  }, [])

  return (isLoaded && <GoogleMap mapContainerStyle={containerStyle} onLoad={onLoad} onUnmount={onUnmount}>
      
      {directions !== null && <DirectionsRenderer directions={directions} suppressMarkers={true} />}
      <Marker position={pickupCoordinates} title="pick up location"
        icon={'images/destination.png'}
      />
      <Marker position={deliveryGuyPosition} title="Delivery Guy"
      icon={'images/delivery.png'}
      />
      </GoogleMap>)

}

export default React.memo(MapContainer)

补充说明 #

如果后续需要自定义路线上的途经点标记，可以解析directions对象中的路线节点，手动添加自定义Marker。当前场景下，仅隐藏默认标记即可满足需求。

内容的提问来源于stack exchange，提问作者Naing Lin Aung