嘿，我刚好处理过类似的需求，给你一套可行的解决方案！核心思路是解析原始Google Maps链接里的关键参数，然后用Google官方的嵌入API来生成可展示的地图组件。

第一步：提取链接中的核心信息 #

你拿到的Google Maps详情页链接（比如https://www.google.it/maps/place/Roma+RM/@41.9099856,12.3955722,11z/...）里包含了我们需要的所有关键数据：

• 地点名称：Roma RM（在/place/后面的部分）
• 经纬度：41.9099856,12.3955722（@符号后面的前两个数值）
• 缩放级别：11（经纬度后面的11z里的数字）

可以用正则表达式快速提取这些信息，示例代码如下：

const mapLink = "https://www.google.it/maps/place/Roma+RM/@41.9099856,12.3955722,11z/data=!3m1!4b1!4m5!3m4!1s0x132f6196f9928ebb:0xb90f77069365...";
const regexPattern = /\/place\/([^\/]+)\/@([\d\.]+),([\d\.]+),(\d+)z/;
const matchResult = mapLink.match(regexPattern);

if (matchResult) {
  // 解码地点名称（把+替换为空格）
  const placeName = decodeURIComponent(matchResult[1].replace(/\+/g, ' '));
  const latitude = matchResult[2];
  const longitude = matchResult[3];
  const zoomLevel = matchResult[4];
  
  // 这里可以把这些参数存起来，用于生成地图
  console.log(`地点：${placeName}，经纬度：${latitude},${longitude}，缩放：${zoomLevel}`);
}

第二步：选择合适的地图展示方式 #

Google提供了两种官方方式来在自己的页面展示地图，都需要你先在Google Cloud控制台申请一个API密钥，并启用对应的API服务。

方式1：嵌入交互式地图（推荐） #

用Google Maps Embed API生成可交互的地图，用户可以缩放、拖动，体验和原生Google Maps一致。构造嵌入URL的格式有两种：

• 用地点名称：https://www.google.com/maps/embed/v1/place?key=你的API密钥&q=地点名称
• 用经纬度：https://www.google.com/maps/embed/v1/place?key=你的API密钥&q=纬度,经度

然后把这个URL放到<iframe>里嵌入页面，示例代码：

<!-- 用地点名称的示例 -->
<iframe 
  width="600" 
  height="450" 
  style="border:0" 
  loading="lazy" 
  allowfullscreen 
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Roma+RM">
</iframe>

<!-- 用经纬度的示例 -->
<iframe 
  width="600" 
  height="450" 
  style="border:0" 
  loading="lazy" 
  allowfullscreen 
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=41.9099856,12.3955722">
</iframe>

方式2：静态地图图片 #

如果不需要交互，只是展示一张地图快照，可以用Google Maps Static Maps API，直接生成一张图片链接，格式如下：

https://maps.googleapis.com/maps/api/staticmap?center=纬度,经度&zoom=缩放级别&size=600x400&key=你的API密钥

示例代码：

<img 
  src="https://maps.googleapis.com/maps/api/staticmap?center=41.9099856,12.3955722&zoom=11&size=600x400&key=YOUR_API_KEY" 
  alt="罗马地图"
>

注意事项 #

1. API密钥申请：必须在Google Cloud控制台创建项目，申请API密钥，并启用对应的API（Embed API或Static Maps API），否则地图无法加载。
2. 配额与费用：Google提供了免费额度，小流量场景完全够用，但如果是高流量网站，需要关注配额和计费规则。
3. 正则兼容性：如果用户粘贴的是其他格式的Google Maps链接（比如搜索结果链接、导航链接），可能需要调整正则表达式来适配，不过你提到已经能捕获链接，只要针对你捕获到的链接格式调整正则即可。

内容的提问来源于stack exchange，提问作者Luigi Caradonna