首页 > 文章 > 前端

HTML集成在线地图教程

时间：2026-02-27 21:16:44 390浏览收藏

本文是一份实用性强、覆盖全面的HTML在线地图集成指南，系统讲解了五种主流方案——高德、百度、Leaflet+OSM、腾讯地图iframe及Google Maps Embed API——各自的应用场景、密钥申请（如需）、SDK引入、容器设置与初始化代码，并贴心提示了常见坑点（如CSS高度缺失、版权标注要求、交互限制和地域限制等），无论你是初学者想快速嵌入静态位置，还是开发者需要深度定制可交互地图，都能从中找到即学即用的解决方案。

html如何做个地图_使用HTML与JS集成在线地图【在线】

如果您希望在网页中嵌入一个可交互的在线地图，通常需要借助第三方地图服务提供的JavaScript API。以下是实现此功能的具体步骤：

一、使用高德地图API嵌入地图

高德地图提供免费的Web端JavaScript API，支持地图显示、标记点、路径规划等基础功能，需申请Key并引入官方SDK。

1、访问高德开放平台注册账号并创建应用，获取Web端Key。

2、在HTML文件的中引入高德地图JS API，格式为：。

3、在页面中添加一个具有固定宽高的

容器，例如

。

4、在。

3、添加地图容器

。

4、编写初始化脚本：var map = new BMap.Map("baiduMap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);

5、百度地图默认启用鼠标滚轮缩放，如需禁用，调用map.disableScrollWheelZoom()。

三、使用Leaflet配合OpenStreetMap嵌入地图

Leaflet是一个轻量级开源JavaScript库，可自由接入OpenStreetMap等免授权图源，无需申请密钥，适合注重隐私或离线部署的场景。

1、在HTML头部引入Leaflet CSS与JS文件：

2、添加地图容器

。

3、初始化地图并设置OSM瓦片图层：
var map = L.map('leafletMap').setView([39.915, 116.404], 13);
L.tileLayer('https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

4、可选添加标记点：L.marker([39.915, 116.404]).addTo(map).bindPopup("北京天安门");

5、注意OpenStreetMap服务条款要求在地图上显示版权信息，Leaflet默认已包含，不可移除。