将百度地图插入网站是许多企业和个人站长提升用户体验、展示地理位置信息的常用需求，无论是门店地址导航、活动场地标注，还是团队位置展示，都能通过嵌入百度地图实现，以下是详细的操作步骤、注意事项及多种实现方式,帮助你顺利完成地图嵌入。
准备工作：获取百度地图开放平台密钥（AK）
在插入地图前，需先获取百度地图开放平台的开发者密钥（AK），这是调用百度地图API的凭证。
- 注册/登录账号：访问百度地图开放平台官网（lbsyun.baidu.com），使用百度账号登录或注册新账号。
- 创建应用：登录后进入“控制台”，点击“创建应用”，选择“浏览器端”应用类型（若网站为HTTPS，需勾选“HTTPS”协议），填写应用名称（如“企业官网地图”），获取AK。
- 设置域名白名单：为防止AK被恶意盗用，需在“创建应用”页面添加调用地图的网站域名（如
www.example.com），若为本地调试可先使用localhost，上线后替换为正式域名。
基础方式：通过百度地图官方“生成器”插入代码
适合新手操作，无需编写代码，直接生成可嵌入的HTML代码。
- 进入生成器页面：百度地图开放平台官网导航栏找到“自定义地图”，点击“创建自定义地图”，或直接访问百度地图生成器。
- 标注地点：
- 搜索标注：在顶部搜索框输入地址（如“北京市朝阳区三里屯太古里”），地图会自动定位，点击“添加标注”确认。
- 手动标注：若需精确位置，可直接在地图上拖动标记点至目标位置。
- 自定义地图样式：
- 基础设置：右侧面板可调整地图名称、缩放级别（默认11级，数值越大越详细）、地图类型（普通地图、卫星图等）。
- 高级样式：点击“更多设置”，可自定义地图底色、标记点图标、信息窗口样式（如添加标题、图片、描述文字）。
- 获取代码：设置完成后，点击“获取代码”，选择“PC端”或“移动端”代码（根据网站适配需求），复制弹出的
iframe代码或JavaScript代码。 - 插入网站：登录网站后台（如WordPress、织梦等），在需要插入地图的页面编辑器中切换“代码”模式，将复制的
iframe代码粘贴到指定位置，保存即可。
进阶方式：使用百度地图JavaScript API自定义地图
若需更灵活的地图功能（如动态标记、路线规划、实时路况等），可通过JavaScript API实现。
引入百度地图API
在网站HTML页面的<head>标签中添加以下代码，替换YOUR_AK为你的实际密钥：
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>
创建地图容器
在页面<body>中添加一个div作为地图容器，并设置宽高（建议宽度100%，高度400px以上，否则地图可能显示不全）：
<div id="map" style="width: 100%; height: 500px;"></div>
初始化地图并添加标记
在<body>标签底部添加以下JavaScript代码，实现地图加载和标记：
<script type="text/javascript">
// 初始化地图，设置中心点坐标（经度，纬度）和缩放级别
var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); // 示例：北京市天安门坐标
map.centerAndZoom(point, 15); // 缩放级别15
// 添加地图控件（缩放、比例尺等）
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
// 创建标记点
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 添加信息窗口（点击标记显示）
var infoWindow = new BMap.InfoWindow("欢迎来到这里！<br>地址：北京市东城区前门大街");
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, point);
});
</script>
坐标获取
若需自定义标记点坐标，可通过百度地图拾取坐标工具（https://api.map.baidu.com/lbsapi/getpoint/index.html）搜索地址获取经纬度。
响应式适配：确保地图在不同设备上正常显示
使用CSS设置自适应宽度
在网站CSS文件中添加以下样式，确保地图容器宽度随屏幕变化：
#map {
width: 100%;
height: 400px; /* 移动端可适当降低高度，如300px */
}
@media (max-width: 768px) {
#map {
height: 300px;
}
}
移动端优化
若网站主要面向移动用户，建议在生成代码时选择“移动端”模板，或通过JavaScriptAPI的BMap.Map构造函数设置适配模式：
map.enablePinchToZoom(); // 启用双指缩放（移动端） map.disableDragging(); // 禁止拖拽（可选，根据需求）
常见问题与注意事项
-
地图无法显示：
- 检查AK是否正确且已添加域名白名单。
- 确认网站是否为HTTPS（若AK仅支持HTTP，则HTTPS网站无法调用）。
- 检查地图容器宽高是否为0（CSS未生效或未设置宽高）。
-
标记点不显示：
- 确认经纬度坐标格式正确（经度在前，纬度在后）。
- 检查
map.addOverlay(marker)是否在map.centerAndZoom()之后调用。
-
信息窗口不弹出：
- 确认
addEventListener事件绑定正确（如“click”而非“onclick”）。 - 检查
InfoWindow内容是否包含特殊字符（需转义）。
- 确认
-
地图加载缓慢：
- 优化AK调用频率，避免频繁初始化地图。
- 使用CDN加速（百度API默认支持CDN，无需额外配置）。
相关问答FAQs
Q1：百度地图插入网站后，如何修改标记点的图标？
A：在JavaScriptAPI中，可通过BMap.Icon自定义标记图标，替换默认标记为本地图片：
var icon = new BMap.Icon("https://example.com/custom-icon.png", new BMap.Size(32, 32)); // 图片尺寸需与实际一致
var marker = new BMap.Marker(point, {icon: icon});
map.addOverlay(marker);
若使用“生成器”插入代码，可在“更多设置”中直接上传自定义图标。
Q2：网站同时需要插入多个标记点，如何批量添加？
A：通过JavaScriptAPI遍历坐标数组批量添加标记，示例代码如下：
var points = [
{lng: 116.404, lat: 39.915, title: "标记点1"},
{lng: 116.405, lat: 39.916, title: "标记点2"},
{lng: 116.406, lat: 39.917, title: "标记点3"}
];
points.forEach(function(item) {
var point = new BMap.Point(item.lng, item.lat);
var marker = new BMap.Marker(point);
var infoWindow = new BMap.InfoWindow(item.title);
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, point);
});
map.addOverlay(marker);
});
若数据量较大，建议结合后端接口动态加载标记点，避免前端代码臃肿。
通过以上方法，你可以轻松将百度地图插入网站，并根据需求调整样式和功能，无论是简单的地址展示，还是复杂的交互地图，百度地图开放平台都能提供灵活的解决方案，帮助用户快速找到目标位置,提升网站实用性。
原文来源：https://www.dangtu.net.cn/article/9014.html
