可通过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库：
3、创建一个具有固定宽度和高度的div容器用于显示地图。
4、编写JavaScript代码初始化地图实例，并设置中心点坐标与缩放级别。
三、集成Google Maps JavaScript API
Google Maps API提供强大的地图渲染能力，适合需要国际化支持的网站。
1、访问Google Cloud Console启用Maps JavaScript API并获取API密钥。
2、在HTML中添加如下脚本引用：
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%防止溢出。
