使用 iframe 嵌入（最简单快捷）
这是最简单、最直接的方法，适用于不需要复杂交互，只想在页面上显示一个静态地图或地图链接的场景，很多地图服务商（如 Google Maps、百度地图、高德地图）都提供了“分享”或“嵌入”功能。
（图片来源网络，侵删）
优点：
- 零代码： 无需编写任何 JavaScript,只需复制粘贴代码。
- 快速： 几分钟内就能完成。
- 简单： 操作非常直观。
缺点：
- 功能受限： 无法自定义地图样式、添加复杂的交互事件（如点击标记弹出自定义窗口）。
- 依赖第三方： 网页加载速度和稳定性依赖于地图服务商。
- 品牌标识： 通常会带有地图服务商的 Logo 和版权信息。
操作步骤（以 Google Maps 为例）：
- 打开 Google Maps： 在浏览器中打开 Google Maps。
- 找到地点： 搜索你想要展示的地点，Statue of Liberty”。
- 点击“分享”： 在地点的详情页，点击“分享”按钮。
- 点击“嵌入地图”： 在弹出的菜单中选择“嵌入地图”。
- 复制代码： Google 会自动生成一段
<iframe>代码，你可以选择尺寸,然后复制这段代码。 - 粘贴到网页： 将复制的代码粘贴到你网页的 HTML 文件中，放在
<body>标签内的任何你想要显示地图的位置。
示例代码：
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">Simple Map Embed</title>
<style>
body { font-family: sans-serif; }
.map-container {
margin: 20px;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden; /* 让 iframe 的圆角生效 */
}
</style>
</head>
<body>
<h1>自由女神像</h1>
<p>这是通过 Google Maps 嵌入的简单地图：</p>
<div class="map-container">
<!-- 从 Google Maps 复制的 iframe 代码 -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.9663095343008!2d-74.04450278459418!3d40.68924397932847!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x4024436db6d7b55e!2sStatue%20of%20Liberty!5e0!3m2!1sen!2sus!4v1629781234567!5m2!1sen!2sus"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
</body>
</html>
百度地图/高德地图 也提供完全类似的功能，只需在其官网找到“地图生成器”或“嵌入”工具即可。
使用 JavaScript API（最灵活、最强大）
这是专业开发者最常用的方法，通过调用地图服务商提供的 JavaScript API，你可以在网页上创建一个完全可定制的、功能丰富的交互式地图。
优点：
- 高度可定制： 可以自由控制地图的样式、缩放级别、中心点。
- 功能强大： 可以添加标记、信息窗口、绘制路线、添加图层、监听各种事件（如点击、拖拽）。
- 无品牌限制： 通常可以移除服务商的 Logo（可能需要付费）。
缺点：
（图片来源网络，侵删）
- 学习成本： 需要一定的 JavaScript 知识。
- 需要 API Key： 通常需要注册并获取一个 API 密钥，并可能涉及费用（大部分服务商提供免费额度）。
- 代码量较大： 相比 iframe 需要编写更多代码。
以 Leaflet.js（开源免费）为例
Leaflet 是一个轻量、开源且功能强大的 JavaScript 库，是许多开发者的首选，因为它没有 API Key 限制,非常灵活。
操作步骤：
- 引入 Leaflet CSS 和 JS 文件： 在你的 HTML 文件的
<head>中引入 Leaflet 的样式表，在<body>底部引入它的脚本文件。 - 创建地图容器： 在 HTML 中创建一个
<div>元素作为地图的容器，并给它一个id和height（必须有高度才能显示）。 - 初始化地图： 在
<script>标签中，使用L.map('container-id')来初始化地图。 - 添加图层： 地图本身是空的，你需要添加一个瓦片图层，最常用的是 OpenStreetMap。
完整示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">Interactive Map with Leaflet</title>
<!-- 1. 引入 Leaflet 的 CSS 文件 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<style>
/* 必须给地图容器设置高度 */
#map {
height: 500px;
width: 100%;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>使用 Leaflet.js 的交互式地图</h1>
<p>这是一个可以拖拽、缩放的地图。</p>
<!-- 2. 创建地图容器 -->
<div id="map"></div>
<!-- 3. 引入 Leaflet 的 JS 文件 (放在 body 底部) -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<!-- 4. 初始化地图 -->
<script>
// 初始化地图，设置中心点和缩放级别
// 中心点坐标：纬度, 经度
var map = L.map('map').setView([51.505, -0.09], 13);
// 添加 OpenStreetMap 瓦片图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// 添加一个标记
var marker = L.marker([51.5, -0.09]).addTo(map);
// 给标记添加一个弹出窗口
marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
</script>
</body>
</html>
以 Google Maps JavaScript API 为例
Google Maps 功能非常强大，但需要 API Key。
- 获取 API Key： 去 Google Cloud Console 创建项目，启用 "Maps JavaScript API" 和 "Geocoding API"，然后创建 API Key。
- 引入 API： 使用一个特殊的
<script>标签引入 Google Maps API，并把你的 Key 放在 URL 里。 - 初始化地图： 使用
google.maps.Map对象来创建地图。
使用第三方地图库/组件（推荐）
如果你使用的是现代前端框架（如 React, Vue, Angular），可以直接使用封装好的地图组件,这能让你以更符合框架思想的方式使用地图。
优点：
- 框架友好： 与 React/Vue 的数据绑定、生命周期等完美结合。
- 开发效率高： 组件化思想,易于复用和维护。
- 封装了细节： 无需关心底层 API 的初始化细节。
常见库：
- React:
- react-leaflet: Leaflet 的 React 封装,非常流行。
- @react-google-maps/api: Google Maps 的 React 封装。
- Vue:
- vue-leaflet: Leaflet 的 Vue 封装。
- vue-google-maps: Google Maps 的 Vue 封装。
- Angular:
- angular-leaflet-map: Leaflet 的 Angular 封装。
- @agm/core: Google Maps 的 Angular 封装。
示例 (使用 react-leaflet):
如果你在一个 React 项目中，使用 react-leaflet 会非常简单。
// MyMapComponent.jsx
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
// 修复 react-leaflet 的默认图标问题
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
function MyMapComponent() {
const position = [51.505, -0.09]; // 伦敦的经纬度
return (
<MapContainer center={position} zoom={13} style={{ height: '500px', width: '100%' }}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
/>
<Marker position={position}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
);
}
export default MyMapComponent;
总结与如何选择
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| iframe 嵌入 | 最简单，零代码，快速 | 功能弱，样式受限，有品牌标识 | 个人博客、公司简介页、展示固定地点 |
| JavaScript API | 功能最强，高度可定制，无品牌限制 | 学习成本高，需要API Key，代码量大 | 需要复杂交互的商业应用、数据可视化、GIS应用 |
| 第三方库/组件 | 框架友好，开发效率高，封装良好 | 依赖特定框架 | 基于 React/Vue/Angular 开发的现代 Web 应用 |
给你的建议：
- 新手或快速展示： 从 iframe 嵌入 开始,最快最简单。
- 想学习或做项目： 强烈推荐从 Leaflet.js 开始，它免费、开源、文档清晰，足够应对 90% 的地图需求。
- 使用现代框架开发： 直接选择对应的第三方库（如
react-leaflet）,会让你事半功倍。
