JavaScript如何动态创建 URL 以在 Google 地图上打开经纬度位置

在使用 React 和 Superbase 构建地图应用程序时，我遇到了想要创建一个链接以打开 Google 地图上的特定位置的情况。

谷歌地图坐标链接格式对此很有用。

基本 URL 结构

在谷歌地图中，您可以使用以下语法指定纬度和经度来打开某个位置：

https://www.google.com/maps?q=,

例如，如果您想显示

纬度：49.2827

经度：-123.1207

https://www.google.com/maps?q=49.2827,-123.1207

在浏览器中打开此链接将显示该位置并带有图钉标记。

使用 JavaScript 进行动态创建

在 React 等框架中使用变量时，
请使用模板字面量构造 URL。

const lat = 49.2827;
const lng = -123.1207;

const googleMapUrl = `https://www.google.com/maps?q=${lat},${lng}`;

console.log(googleMapUrl);
// → https://www.google.com/maps?q=49.2827,-123.1207

使用模板字面量（...），
您可以将变量 ${} 嵌入到字符串中。

React 示例

例如，从 Supabase 获取地点信息：

a标签链接 `https://www.google.com/maps?q=${latitude},${longitude}`

这样输入后，点击即可在谷歌地图中打开该地点的位置。