html个人页面怎么加地图嵌入_html地图api调用教程【功能】

用 iframe 嵌入静态地图最简：直接复制 Google Maps 或高德地图分享页的 iframe 代码，设宽高像素值（如 width="600" height="400"）；示例高德：。

怎么用 iframe 快速嵌入静态地图（最简方案）

如果你只要在个人页面上显示一个固定位置的地图，比如“我家附近”或“公司地址”，iframe 是最快、最稳的方式，不用申请密钥、不写 JS、不处理跨域。

直接从 Google Maps 或高德地图复制分享链接里的 iframe 代码即可。注意两点：

• Google Maps 分享时要点「嵌入地图」→ 选「复制 HTML」，别只复制 URL；
• 高德地图需打开「分享」→「嵌入网页」→ 复制 标签；
• 粘贴到你的 HTML 文件中，width 和 height 建议设为具体像素（如 width="600" height="400"），避免响应式错位。

示例（高德）：

leaflet + 免费瓦片实现可交互地图（推荐自控方案）

想缩放、拖拽、加标记、换底图？用 leaflet 搭配 OpenStreetMap 免费瓦片，零成本、无密钥、轻量可控。

关键步骤：

• 在 中引入 leaflet.css 和 leaflet.js（CDN 地址用官方最新版，如 https://unpkg.com/leaflet@1.9.4/

  

  dist/leaflet.css）；
• 在页面中放一个带 id 的 ，比如 ；
• JS 里初始化地图：先 L.map('map')，再用 L.tileLayer('https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png') 加底图；
• 最后用 L.marker([lat, lng]).addTo(map) 加标记——注意经纬度顺序是 [纬度, 经度]，不是 GPS 设备常见的“经度在前”。

调用高德/百度地图 API 需要哪些硬性准备

不是加个 script 标签就能用。真要用它们的 JS API，以下三件事缺一不可：

• 必须注册开发者账号并创建应用，获取 key（高德叫“Web 服务 key”，百度叫“AK”）；
• 必须在控制台绑定你页面的域名（localhost 算合法调试域名，但上线后填错会直接白屏）；
• 高德 API 的 AMap.Map 初始化必须等容器 DOM 加载完成，否则报 container is null；百度 BMap.Map 同样要求容器有明确宽高（不能是 height: auto）。

常见错误：amap is not defined —— 没等 https://webapi.amap.com/maps?v=2.0&key=xxx 加载完就执行初始化；Invalid key —— key 复制漏了字符，或绑错了域名。

为什么不用 Google Maps JS API

它现在强制要求密钥+账单绑定，哪怕只是展示一张地图，一旦流量超免费额度（每月 $200 信用额），就会静默停用，页面地图变灰+报 Google Maps JavaScript API error: InvalidKeyMapError。

对个人页面来说，风险远大于收益。除非你明确需要 Street View、路线规划等独家能力，否则绕开更省心。

真正容易被忽略的是：地图容器的 CSS。无论用哪种方式，div#map 必须有**显式高度**（height: 400px 或 min-height），且父级不能是 display: flex 但没设 align-items，否则地图 canvas 渲染区域可能为 0。