使用 Google Maps 嵌入代码（最常用、最简单）
这是最直接、最普遍的方法，适合在网页上展示一个固定的地址、位置标记,并提供简单的路线规划功能。
（图片来源网络，侵删）
优点：
- 操作简单： 只需复制粘贴代码,几步即可完成。
- 功能强大： 自带缩放、拖动、街景、路线规划等全套 Google Maps 功能。
- 免费： 对大多数个人网站和小型商业网站来说,免费配额足够使用。
缺点：
- 需要网络： 必须联网才能加载地图。
- 依赖 Google： Google 服务在中国大陆访问不稳定,地图可能无法加载。
- 自定义性有限： 虽然可以自定义样式,但深度定制不如专业地图库灵活。
操作步骤：
第1步：找到你想展示的地点
- 打开 Google Maps。
- 在搜索框中输入你的地址，北京市天安门广场”。
- 找到精确的位置后，点击右上角的“菜单”按钮（三条横线），选择“分享或嵌入地图”。
第2步：获取嵌入代码
（图片来源网络，侵删）
- 在弹出的窗口中，选择“嵌入地图”选项卡。
- 你会看到一个
<iframe>代码框，Google 已经为你生成了代码。 - （可选）自定义地图：
- 尺寸： 你可以直接在下拉菜单中选择预设尺寸（小、中、大），或者勾选“自定义尺寸”来输入具体的宽度和高度。
- 缩放级别： 点击“自定义”链接,可以调整地图的初始缩放级别。
- 复制生成的
<iframe>代码。
第3步：将代码粘贴到你的网站
- 打开你的网站编辑器（如 WordPress、Wix、Squarespace，或者直接编辑 HTML/CSS 文件）。
- 找到你想要放置地图的位置（例如一个页面或文章）。
- 切换到“代码”或“HTML”编辑模式（非常重要！如果直接在可视化模式下粘贴，可能会被过滤掉）。
- 将复制的
<iframe>代码粘贴进去。 - 保存并发布你的网站。
第4步：响应式处理（推荐）
为了让地图在手机等小屏幕设备上也能正常显示，建议用 <div> 容器包裹一下，并添加一些 CSS 代码。
HTML 代码：
<div class="map-container"> <iframe src="https://www.google.com/maps/..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div>
CSS 代码（添加到你的网站样式表中）：
（图片来源网络，侵删）
.map-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 的宽高比 */
height: 0;
overflow: hidden;
max-width: 100%;
}
.map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
这段 CSS 会让地图容器保持一个固定的宽高比，并让 <iframe> 填满整个容器,从而实现完美的响应式效果。
使用第三方地图服务（如高德地图、百度地图）
如果你的主要用户在中国大陆，使用高德或百度地图通常加载速度更快，体验更好，操作步骤与 Google Maps 非常类似。
以高德地图为例：
第1步：获取开发者密钥（Key）
- 访问高德开放平台，并注册/登录账号。
- 进入“应用管理” -> “我的应用”，点击“创建新应用”,填写应用名称。
- 在“添加 Key”页面，为你的应用选择 Web 端服务，并设置一个 Referer 白名单（可以先填 ，代表所有域名，但为了安全，上线后最好改为你的网站域名）。
- 创建成功后，你会得到一个独一无二的 Key。
第2步：使用 Web 服务 API 高德提供了两种方式：
- 静态地图 API： 生成一张静态的地图图片,适合做简单的展示。
- Web 端 JavaScript API： 生成一个可交互的动态地图，功能更强大，但需要写一些 JavaScript 代码。
简单嵌入（静态图）：
- 访问静态地图 API 文档。
- 按照文档说明，构造一个 URL，包含你的 Key、中心点坐标、缩放级别、标记点等。
https://restapi.amap.com/v3/staticmap?... - 将这个 URL 作为
<img>标签的src属性即可。<img src="https://restapi.amap.com/v3/staticmap?..." alt="地图">
交互式地图（需要 JS 代码）：
- 在你的 HTML 页面中引入高德地图的 JS API。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的密钥"></script>
- 在页面中创建一个
<div>作为地图容器。<div id="container" style="width: 100%; height: 500px;"></div>
- 编写 JavaScript 代码来初始化地图。
<script> var map = new AMap.Map('container', { viewMode: '2D', // 使用2D视图 zoom: 11, // 初始缩放级别 center: [116.397428, 39.90923] // 初始中心点坐标 [经度, 纬度] }); </script>这需要你具备一些前端开发基础。
使用开源地图库（如 Leaflet.js）
如果你对数据隐私有顾虑，或者希望地图完全脱离某个商业公司的服务，可以选择使用开源的地图库，Leaflet 是目前最流行、最轻量级的开源 JavaScript 库。
优点：
- 开源免费： 无需担心 API 调用费用和配额限制。
- 高度自定义： 可以完全控制地图的样式和行为。
- 数据隐私： 可以使用 OpenStreetMap 等开源地图数据,数据留在本地。
- 轻量高效： 库文件很小,加载速度快。
缺点：
- 需要编程： 必须自己编写 HTML、CSS 和 JavaScript 代码。
- 无原生数据源： 地图数据（如地点搜索、路线规划）需要自己接入其他服务（如 OpenRouteService）或使用商业 API。
操作步骤（使用 Leaflet.js）：
第1步：引入 Leaflet 的 CSS 和 JS 文件
在 HTML 的 <head> 标签中引入 CSS，在 <body> 标签结束前引入 JS。
<!-- Leaflet CSS --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <!-- Leaflet JS --> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
第2步：创建地图容器
在 HTML 中创建一个 <div>,并设置其高度和宽度。
<div id="map" style="height: 500px; width: 100%;"></div>
第3步：初始化地图
在 <script> 标签中编写 JavaScript 代码来创建地图实例。
<script>
// 创建地图实例，并设置中心点和缩放级别
var map = L.map('map').setView([51.505, -0.09], 13);
// 添加地图图层（使用 OpenStreetMap 作为底图）
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// 添加一个标记
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('我是一个标记.')
.openPopup();
</script>
这段代码会创建一个以伦敦市中心为初始视图的交互式地图,并添加一个标记弹窗。
总结与选择建议
| 方法 | 易用性 | 定制性 | 成本 | 适用场景 |
|---|---|---|---|---|
| Google Maps 嵌入 | ⭐⭐⭐⭐⭐ (极高) | ⭐⭐ (较低) | 免费（有配额） | 绝大多数网站，快速展示公司地址、门店位置。 |
| 高德/百度地图 | ⭐⭐⭐⭐ (较高) | ⭐⭐⭐ (中等) | 免费（有配额） | 中国大陆用户为主的网站，需要更好的加载速度和本地化服务。 |
| 开源地图库 | ⭐⭐ (较低) | ⭐⭐⭐⭐⭐ (极高) | 免费 | 开发者，对数据隐私、地图样式有高度定制要求的复杂项目。 |
给你的建议：
- 如果你是网站管理员或内容编辑，不想写代码：直接选择 方法一（Google Maps 嵌入） 或 方法二（高德/百度地图），这是最快、最省心的方式。
- 如果你的网站主要服务中国大陆用户：优先尝试 方法二（高德/百度地图）,用户体验会更好。
- 如果你是开发者，想要打造独一无二、不依赖任何服务商的地图功能：方法三（Leaflet.js） 是你的最佳选择。
