可通过iframe嵌入或调用API实现地图展示，首先获取百度或Google地图的嵌入代码或API密钥，将其插入HTML指定容器，并通过CSS适配响应式布局以确保多设备兼容性。
如果您希望在网页中展示地理位置或提供导航功能，可以通过嵌入地图服务来实现。以下是将百度地图或Google Maps插入HTML页面的多种方法：
一、使用iframe嵌入地图
通过地图服务商提供的公开嵌入代码，可以直接将地图以iframe形式插入网页中，适用于大多数静态网站。
1、访问百度地图或Google Maps，搜索目标位置。
2、点击“分享”或“嵌入地图”选项，获取系统生成的iframe代码。
立即学习“前端免费学习笔记（深入）”；
3、将复制的iframe代码粘贴到HTML文件的
区域中。4、调整iframe的width和height属性，以适配网页布局。
二、调用百度地图JavaScript API
使用百度地图开放平台的JavaScript API可以实现更灵活的地图控制和自定义功能。
1、前往百度地图开放平台申请一个API密钥。
2、在HTML文件中引入百度地图JS库：
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script>
3、创建一个具有固定宽度和高度的div容器用于显示地图。
4、编写JavaScript代码初始化地图实例，并设置中心点坐标与缩放级别。
三、集成Google Maps JavaScript API
Google Maps API提供强大的地图渲染能力，适合需要国际化支持的网站。
1、访问Google Cloud Console启用Maps JavaScript API并获取API密钥。
2、在HTML中添加如下脚本引用：
<script async defer src="https://maps.googleapis.com/maps/api/js?key=您的API密钥&callback=initMap"></script>
3、定义一个id为"map"的div元素作为地图容器。
4、编写initMap函数，在该函数中创建地图对象并设定中心位置与zoom值。
四、响应式地图嵌入方案
为了确保地图在移动设备上正常显示，需采用CSS对嵌入内容进行响应式处理。
1、将iframe或地图容器包裹在一个具有相对定位的父div中。
2、使用CSS设置父容器的padding-top百分比值，保持宽高比。
3、将地图容器设为绝对定位，覆盖整个父容器区域。
4、设置iframe或地图div的width和height为100%，并应用max-width: 100%防止溢出。
