如何在react-google-maps中设置带「开始」标记的多停靠点起点

现有代码无法实现专属起点效果的3个核心原因：

• 多段线（Polyline）的路径仅拼接了订单停靠点坐标，未将自定义起点纳入路径计算，无法实现从起点出发的连线逻辑
• 标记渲染仅循环生成带数字序号的停靠点标记，未单独渲染带"Start"文本的专属起点
• 多段线配置中写了无效的图标参数icon: "hello"，该值无法被谷歌地图API识别，会导致连线渲染异常

• 组件层面新增startPoint入参：支持外部传入起点的经纬度坐标，无需将起点位置硬编码在组件内部，适配不同业务场景的起点配置需求
• 重构多段线路径生成逻辑：构造路径数组时优先将起点坐标放在数组首位，后续按原有顺序拼接所有停靠点坐标，保证连线从起点出发依次串联所有站点
• 单独渲染起点标记：为起点配置专属的"Start"文本标签，可通过自定义填充色、图标尺寸与普通带数字的停靠点标记做视觉区分
• 调整地图视野适配逻辑：计算地图边界范围时将起点坐标纳入计算，避免地图自动缩放时将起点移出可视区域

import React, { useState, useMemo } from "react";
import {
  GoogleMap,
  InfoWindow,
  Marker,
  Polyline,
} from "@react-google-maps/api";

// startPoint 入参示例结构：{ lat: 纬度值, lng: 经度值 }
function Map({ scheduledOrders, startPoint }) {
  const [activeMarker, setActiveMarker] = useState(null);

  // 生成停靠点标记配置，使用可选链简化冗余判断
  const markers = useMemo(() => {
    if (!scheduledOrders?.[0]) return [];
    return scheduledOrders[0].map((item, index) => ({
      id: index + 1,
      name: item.customerName + " - " + item.customerAddress,
      position: {
        lat: Number(item?.order_lat, 10),
        lng: Number(item?.order_lng, 10),
      },
    }));
  }, [scheduledOrders]);

  // 生成多段线路径：起点在最前，后续拼接所有停靠点
  const polylinePath = useMemo(() => {
    const orderPoints = markers.map(item => item.position);
    return startPoint ? [startPoint, ...orderPoints] : orderPoints;
  }, [markers, startPoint]);

  const handleActiveMarker = (markerId) => {
    if (markerId === activeMarker) {
      return;
    }
    setActiveMarker(markerId);
  };

  const handleOnLoad = (map) => {
    const bounds = new window.google.maps.LatLngBounds();
    // 计算边界时纳入起点坐标，保证视野覆盖
    if (startPoint) bounds.extend(startPoint);
    markers.forEach(({ position }) => bounds.extend(position));
    map.fitBounds(bounds);
  };

  return (
    <GoogleMap
      onLoad={handleOnLoad}
      onClick={() => setActiveMarker(null)}
      mapContainerStyle={{ width: "100%", height: "88vh" }}
    >
      <Polyline
        path={polylinePath}
        options={{
          strokeColor: "#07966B",
          strokeOpacity: 1,
          strokeWeight: 2,
        }}
      />

      {/* 专属起点标记 */}
      {startPoint && (
        <Marker
          position={startPoint}
          label={{ text: "Start", color: "white", fontSize: "12px" }}
          icon={{
            path: window.google.maps.SymbolPath.CIRCLE,
            fillColor: "#07966B",
            fillOpacity: 1,
            strokeWeight: 0,
            scale: 12,
          }}
        />
      )}

      {/* 普通停靠点标记 */}
      {markers.map(({ id, name, position }) => (
        <Marker
          key={id}
          position={position}
          onClick={() => handleActiveMarker(id)}
          label={{ text: `${id}`, color: "white" }}
          icon={{
            path: window.google.maps.SymbolPath.CIRCLE,
            fillColor: "#07966B",
            fillOpacity: 1,
            strokeWeight: 0,
            scale: 10,
          }}
        >
          {activeMarker === id ? (
            <InfoWindow onCloseClick={() => setActiveMarker(null)}>
              <div>{name}</div>
            </InfoWindow>
          ) : null}
        </Marker>
      ))}
    </GoogleMap>
  );
}

export default Map;

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