如何使用Google Maps实现动态Get Directions按钮组件

问题背景 #

我正在开发一个Get Direction按钮组件，现有TypeScript代码如下：

interface PropsType {
  coordinates: {
    lat: number;
    lng: number;
  } | null;
}

type LocationAddress = {
  city: string
  name: string
  state: string
  address: string | null
}

export default function GetDirectionButton(props: PropsType, address: LocationAddress) {
  return (
    <Button
      variant="contained"
      href="(HOW DO I DO THIS PART)"
      target="_blank"
    >
      Get Direction
    </Button>
  );
}

需求是根据传入的商家名称、地址和坐标，生成可在新页面打开Google Maps路线页的动态链接。以Nellis Auction为例：

• name: Nellis Auction
• address: 7440 Dean Martin Dr Suite 204
• coordinates: {lat: 36.0544499, lng: -115.1816101}
  需要组件支持动态传入不同门店的地址信息，同时想了解：是否需要借助Google Cloud Platform API实现？还是可以直接构造Google Maps URL？

另外补充：我已找到官方的URL构造方案，同时想问：自己找到问题解决方案后，是删除帖子还是保留并标注解决方案更好？

解决方案 #

1. 无需GCP API，直接构造Google Maps URL #

不需要调用Google Cloud Platform的API，直接按照官方规范构造Google Maps的路线URL即可。核心逻辑是利用指定导航动作的参数，结合目的地的坐标或地址信息生成链接。

2. 修正组件代码并实现动态URL生成 #

首先调整组件的Props结构，将LocationAddress合并到PropsType中（原组件的参数传递方式不符合React组件规范，React组件仅接受一个Props对象），再根据传入的坐标或地址生成动态href：

interface LocationAddress {
  city: string;
  name: string;
  state: string;
  address: string | null;
}

interface PropsType {
  coordinates: {
    lat: number;
    lng: number;
  } | null;
  address: LocationAddress;
}

export default function GetDirectionButton({ coordinates, address }: PropsType) {
  // 生成目的地参数：优先使用坐标，无坐标则用地址拼接
  let destinationParam = "";
  if (coordinates) {
    destinationParam = `${coordinates.lat},${coordinates.lng}`;
  } else if (address.address) {
    // 对地址进行URL编码，避免特殊字符问题
    destinationParam = encodeURIComponent(`${address.address}, ${address.city}, ${address.state}`);
  } else {
    // 无坐标也无地址时，按钮不渲染
    return null;
  }

  // 构造Google Maps路线URL
  const googleMapsUrl = `https://www.google.com/maps/dir/?api=1&destination=${destinationParam}&dir_action=navigate`;

  return (
    <Button
      variant="contained"
      href={googleMapsUrl}
      target="_blank"
      disabled={!destinationParam}
    >
      Get Direction
    </Button>
  );
}

3. 关于帖子处理的建议 #

建议保留帖子并标注解决方案，原因如下：

• 帮助遇到相同问题的其他开发者快速找到解决思路
• 形成完整的问题-解决方案记录，便于后续自己回顾
• 维护社区的知识沉淀，提升社区内容价值

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