html如何嵌入在线地图_html网页显示百度/谷歌地图-html教程-PHP中文网

必须先申请密钥（ak），再通过引入sdk，地图容器需有明确宽高，调用new bmapgl.map('map')并centerandzoom初始化即可显示基础地图。

html如何嵌入在线地图_html网页显示百度/谷歌地图

百度地图 JS API 怎么加载并显示一个基础地图

必须先去百度地图开放平台申请密钥（AK），否则 init 会报 Invalid key 错误。拿到 AK 后，直接在 HTML 中引入 SDK 并初始化容器即可：

关键点：

<script src="https://api.map.baidu.com/api?v=3.0&ak=%E4%BD%A0%E7%9A%84AK"></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 访问）
未在中正确加载：必须用 <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>，async 和 defer 缺一不可

加载后需等 google.maps.Map 可用再初始化，推荐用回调方式：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<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&center=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></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。