可在HTML5中通过五种方式集成地图：一、高德API嵌入交互式地图；二、百度API调用带AK的地图服务；三、SVG绘制静态中国行政区划；四、Leaflet接入高德/百度瓦片图层；五、D3.js结合GeoJSON实现动态可视化。
如果您希望在HTML5页面中集成地图功能，可以通过调用高德地图API、百度地图API或使用SVG手动绘制地理区域来实现。以下是具体实施方式：
一、使用高德地图JavaScript API嵌入地图
高德地图API提供标准化的JavaScript SDK，支持地图容器初始化、标记添加、缩放控制等功能，适用于需要交互式地图的场景。
1、在HTML文件的<head>中引入高德地图JS API，需替换为您的有效key：
<script src="https://webapi.amap.com/maps?v=2.0&key=您的高德key"></script>
2、在页面中创建一个具有固定宽高的DOM容器，例如：
<div id="amap-container" style="width: 600px; height: 400px;"></div>
立即学习“前端免费学习笔记（深入）”；
3、在<script>标签内初始化地图实例，设置中心点坐标（如北京）和缩放级别：
var map = new AMap.Map('amap-container', {
center: [116.397428, 39.90923],
zoom: 12
});
4、可选：添加一个标记点，使用AMap.Marker类：
new AMap.Marker({
position: [116.397428, 39.90923],
map: map
});
二、使用百度地图JavaScript API嵌入地图
百度地图API同样提供完整的Web端SDK，支持国内常见地理服务，需申请对应AK并启用Web服务授权。
1、在<head>中引入百度地图JS API，注意替换为您申请的ak：
<script src="https://api.map.baidu.com/api?v=3.0&ak=您的百度ak"></script>
2、定义地图容器DOM元素：
<div id="baidu-map" style="width: 600px; height: 400px;"></div>
3、初始化BMapGL.Map（新版GL版）或BMap.Map（经典版），此处以GL版为例：
var map = new BMapGL.Map("baidu-map");
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
4、添加覆盖物（如标注）需使用BMapGL.Marker：
var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
map.addOverlay(marker);
三、使用SVG绘制静态中国地图
当不需要交互功能、仅需展示行政区划轮廓时，可采用纯SVG路径数据绘制地图，完全脱离第三方API依赖，适合离线环境或轻量级展示。
1、获取中国省级行政区SVG路径数据（例如从公开地理信息平台导出GeoJSON后转换为<path d="...">格式）
2、将SVG代码嵌入HTML，包裹在<svg>标签中，并设置viewBox与尺寸：
<svg viewBox="0 0 1000 600" width="600" height="400">
<path d="M...Z" fill="#e0e0e0" stroke="#999" stroke-width="0.5"/>
</svg>
3、为各省份添加id属性（如id="beijing"）便于后续CSS样式控制或JavaScript绑定事件
4、通过CSS设置悬停效果：
svg path:hover { fill: #ff6b6b; cursor: pointer; }
四、使用Leaflet配合高德/百度瓦片图层显示地图
Leaflet是轻量级开源地图库，可通过自定义瓦片URL接入高德或百度的地图底图服务，规避其原生SDK限制，同时保留丰富插件生态。
1、引入Leaflet CSS与JS文件：
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
2、创建地图容器并初始化Leaflet Map对象：
var map = L.map('leaflet-map').setView([39.90923, 116.397428], 12);
3、配置高德矢量图瓦片URL（需替换key）：
L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}&appkey=您的高德key', {
subdomains: '1234'
}).addTo(map);
4、添加标记使用L.marker()方法：
L.marker([39.90923, 116.397428]).addTo(map);
五、使用GeoJSON + D3.js渲染动态地图
D3.js擅长数据驱动的DOM操作，结合GeoJSON地理数据可实现高度定制化的地图可视化，支持投影变换、缩放平移及数据绑定。
1、引入D3库：
<script src="https://d3js.org/d3.v7.min.js"></script>
2、加载中国省级GeoJSON数据（可托管为JSON文件或内联定义）
3、创建SVG画布并设置投影（如geoMercator）：
var projection = d3.geoMercator().center([105, 35]).scale(800);
var path = d3.geoPath().projection(projection);
4、使用d3.select选择容器，绑定GeoJSON数据并绘制路径：
svg.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", path)
.style("fill", #c0c0c0)
.style("stroke", "#333");
