如何嵌入在线地图_html网页显示百度或谷歌地图
作者：袖梨
2026-07-19
必须先申请密钥（AK），再通过<script src="https://api.map.baidu.com/api?v=3.0&ak=你的AK"></script>引入SDK，地图容器需有明确宽高，调用new BMapGL.Map('map')并centerAndZoom初始化即可显示基础地图。
百度地图 JS API 怎么加载并显示一个基础地图
必须先去 百度地图开放平台 申请密钥（AK），否则 init 会报 Invalid key 错误。拿到 AK 后，直接在 HTML 中引入 SDK 并初始化容器即可：
关键点：
-
<script src="https://api.map.baidu.com/api?v=3.0&ak=你的AK"></script>必须放在地图容器 DOM 创建之后，或用defer - 地图容器（如
<div id="map"></div>）必须设置明确的width和height（百分比也行，但父级不能是height: auto） -
BMapGL.Map（新版）或BMap.Map（旧版）构造函数第一个参数是容器元素或 ID 字符串，第二个是配置对象
简单示例：
<div id="map" style="width: 600px; height: 400px;"></div><script src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script><script> const map = new BMapGL.Map('map'); map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 15); // 北京坐标</script>
谷歌地图嵌入为什么经常白屏或报错 Google Maps JavaScript API error: InvalidKeyMapError
谷歌地图在国内无法直连，且密钥必须严格绑定 HTTP 协议、域名和 referrer（如果启用了限制）。白屏常见原因不是代码写错，而是环境或配置问题：
立即学习“前端免费学习笔记（深入）”；
- 本地开发用
file://协议打开 HTML —— 谷歌不认，必须走http://localhost或部署后访问 - API 密钥没开启
Maps JavaScript API服务（控制台要手动启用） - 密钥设置了 HTTP referrer 限制，但当前页面域名不在白名单里（比如填了
example.com/*却用www.example.com访问） - 未在
<head>中正确加载：必须用<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>，async和defer缺一不可
加载后需等 google.maps.Map 可用再初始化，推荐用回调方式：
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"></script><script> function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 39.915, lng: 116.404 } }); }</script>
不用 API 密钥也能快速展示地图？试试静态图或 iframe 嵌入
如果只是展示固定位置、不需要交互（缩放/拖拽/标记），静态图或 iframe 是最轻量、零配置的方式：
- 百度静态图：用
https://api.map.baidu.com/staticimage/v2?ak=YOUR_AK¢er=116.404,39.915&width=600&height=400&zoom=15，无需 JS，适合邮件、报表页 - 谷歌静态图：类似，但需密钥，URL 形如
https://maps.googleapis.com/maps/api/staticmap?center=39.915,116.404&zoom=15&size=600x400&key=YOUR_KEY - iframe 嵌入（推荐给非技术用户）：直接从百度/谷歌地图网页点「分享」→「嵌入地图」，复制生成的
<iframe>，粘贴即用；缺点是样式不可控、移动端缩放可能异常
注意：<iframe> 方式下，百度地图 iframe 的 src 域名是 https://map.baidu.com，国内可访问；谷歌的 https://www.google.com/maps/embed 在国内基本打不开，慎选。
地图容器尺寸变化后地图显示不全或错位怎么办
这是最常被忽略的实操细节：地图实例创建后，如果容器宽高动态改变（比如侧边栏展开、响应式布局切换），必须手动触发 resize 事件，否则地图瓦片不会重绘：
- 百度地图：
map.resize()（v3.0+）或map.setViewport(map.getBounds())（旧版） - 谷歌地图：
google.maps.event.trigger(map, 'resize') - 最佳实践：监听窗口 resize，或在你控制的 DOM 变更后加延时调用（避免重复触发），例如：
setTimeout(() => map.resize(), 100)
另外，用 CSS Flex/Grid 布局时，确保地图容器父级有明确高度约束（比如 flex: 1 配合 height: 100vh），否则 height: 100% 会失效，导致地图高度为 0。
