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}`这样输入后,点击即可在谷歌地图中打开该地点的位置。