在网站中嵌入百度地图是提升用户体验、展示地理位置信息的重要方式，无论是企业官网展示门店地址、房地产项目标注楼盘位置，还是旅游平台推荐景点坐标，都能通过地图功能直观呈现，以下是详细的操作步骤、注意事项及优化方法,帮助开发者高效实现百度地图的集成。
准备工作：获取百度地图密钥（AK）
在嵌入地图前，需先登录百度地图开放平台（https://lbsyun.baidu.com/）申请开发者密钥（AK），这是调用百度地图API的凭证，具体步骤如下：
- 注册账号：使用百度账号登录开放平台，未注册用户需先完成个人或企业实名认证（企业认证需提供营业执照等材料，功能权限更全）。
- 创建应用：进入“控制台”>“我的应用”>“创建应用”，填写应用名称（如“企业官网地图”）、选择应用类型（Web端JS API、Android SDK、iOS SDK等，网站选Web端），设置授权域名（即允许调用API的网站域名，如
www.example.com，不支持IP地址或localhost，开发时可暂时设置为，但正式上线前务必修改为具体域名）。 - 获取AK：创建成功后，系统会生成AK，需妥善保存，AK泄露可能导致API被恶意调用,产生不必要的费用或安全风险。
直接嵌入百度地图（适合简单需求）
对于仅需展示固定位置、无需复杂交互的场景（如企业官网“联系我们”页面），可直接通过百度地图官网生成 embed 代码嵌入，操作步骤：
- 搜索地点：打开百度地图官网（https://map.baidu.com/），搜索需要标注的地址（如“北京市朝阳区三里屯太古里”）。
- 获取分享代码：点击左侧“分享”按钮，在弹窗中选择“嵌入地图”，调整地图尺寸（宽度建议100%适配容器，高度可设置为400-600px），复制下方“iframe”代码。
- 嵌入网站：将复制的代码粘贴到网站HTML文件的
<body>标签中目标位置（如<div class="map-container">内）。
示例代码：
<iframe src="https://map.baidu.com/@?&width=100%&height=600&text=!3m1!1e3!4b1!4d123456.123456!5m1!1e1&src=6" width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"> </iframe>
注意事项：
- 此方法生成的代码本质是 iframe 嵌入，地图样式和功能较简单，无法自定义标注点、信息窗口等内容。
- 若需修改地点，需重新生成代码，灵活性较低。
使用百度地图JavaScript API（适合自定义需求）
若需自定义标注点、信息窗口、路线规划等交互功能，需通过百度地图JavaScript API实现，以下是详细步骤：
引入API文件
在HTML文件的<head>标签中引入百度地图JS API，需替换YOUR_AK为实际申请的密钥：
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>
参数说明：
v=3.0：API版本，建议使用最新版。ak=YOUR_AK：开发者密钥，必填。- 可添加扩展参数，如
&callback=initMap（指定初始化回调函数，需全局定义）。
创建地图容器
在<body>中创建一个<div>作为地图容器，需设置id和style（必须定义宽度和高度，否则无法显示）：
<div id="mapContainer" style="width: 100%; height: 500px;"></div>
初始化地图
通过JavaScript代码初始化地图，设置中心点坐标和缩放级别：
<script type="text/javascript">
function initMap() {
// 创建地图实例
var map = new BMap.Map("mapContainer");
// 设置中心点坐标（示例：北京市天安门）
var point = new BMap.Point(116.404, 39.915);
// 初始化地图，设置缩放级别（3-19，数字越大越详细）
map.centerAndZoom(point, 15);
// 启用鼠标滚轮缩放
map.enableScrollWheelZoom(true);
}
// 页面加载完成后初始化地图
window.onload = initMap;
</script>
添加标注点
若需在地图上标记多个位置（如门店、分站），可使用BMap.Marker：
// 示例：添加单个标注点
var markerPoint = new BMap.Point(116.404, 39.915);
var marker = new BMap.Marker(markerPoint);
map.addOverlay(marker);
// 示例：添加多个标注点（循环遍历）
var points = [
{lng: 116.404, lat: 39.915, title: "总部"},
{lng: 116.407, lat: 39.920, title: "分店1"},
{lng: 116.401, lat: 39.910, title: "分店2"}
];
points.forEach(function(item) {
var marker = new BMap.Marker(new BMap.Point(item.lng, item.lat));
var infoWindow = new BMap.InfoWindow("<p>" + item.title + "</p>"); // 信息窗口内容
marker.addEventListener("click", function() {
map.openInfoWindow(infoWindow, marker.getPosition()); // 点击标注点显示信息窗口
});
map.addOverlay(marker);
});
自定义地图样式
百度地图支持自定义底图样式（如调整道路、建筑颜色），可通过“样式编辑器”（https://lbsyun.baidu.com/custom/index.htm）生成自定义JSON样式代码，然后在初始化地图后应用：
// 加载自定义样式
map.setMapStyle({
styleJson: [
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": {
"lightness": 100
}
}
// 更多样式配置...
]
});
常见问题与优化建议
地图无法显示？
- 检查容器尺寸：确保
<div>的width和height不为0，可通过CSS设置min-height: 400px避免。 - 确认AK有效性：检查AK是否正确填写、授权域名是否匹配（开发环境需添加
http://localhost或http://127.0.0.1到白名单）。 - 浏览器控制台报错：查看是否因网络问题导致API加载失败，或JS代码语法错误（如缺少分号、变量未定义）。
地图加载速度慢？
- 按需加载API：百度地图支持模块化加载，仅引入所需功能（如
&services=geolocation），减少体积。 - 使用CDN加速：确保API链接使用百度官方CDN，避免本地或第三方服务器缓存问题。
- 延迟加载：通过
IntersectionObserverAPI实现地图容器进入视口后再初始化，减少首屏加载压力。
相关问答FAQs
Q1：如何在百度地图上添加多个标注点并显示不同信息窗口？
A：通过遍历标注点数组，为每个点创建BMap.Marker和BMap.InfoWindow，并绑定click事件，示例代码如下：
var markers = [
{point: [116.404, 39.915], title: "总部地址：北京市朝阳区xxx路1号"},
{point: [116.407, 39.920], title: "分店地址：北京市海淀区xxx路2号"}
];
markers.forEach(function(item) {
var marker = new BMap.Marker(new BMap.Point(item.point[0], item.point[1]));
var infoWindow = new BMap.InfoWindow("<p>" + item.title + "</p>");
marker.addEventListener("click", function() {
map.openInfoWindow(infoWindow, marker.getPosition());
});
map.addOverlay(marker);
});
Q2：百度地图API调用超出免费额度怎么办？
A：百度地图API提供每月免费调用额度（如Web端JS API每月免费30万次），超出后需按量付费，可通过以下方式控制成本：
- 优化调用逻辑：避免重复请求相同数据（如缓存坐标信息）。
- 降级处理：当API调用失败或超出额度时，显示静态地图图片作为备选（通过“静态地图API”生成，免费额度更高）。
- 升级套餐：企业用户可申请商用套餐，获取更高额度和技术支持。
通过以上方法，可根据网站需求选择合适的地图嵌入方式，从简单的iframe到复杂的自定义交互，实现地理位置信息的有效展示,提升用户体验和网站实用性。
原文来源：https://www.dangtu.net.cn/article/9014.html
