要在网站中嵌入百度地图代码,需通过百度地图开放平台获取API密钥，并按照官方文档生成自定义地图，以下是详细步骤和注意事项：
准备工作
-
注册百度地图开放平台账号
访问百度地图开放平台官网，使用百度账号登录或注册新账号，完成实名认证（个人或企业）后，进入“控制台”。 -
申请API密钥（AK）
在控制台“应用管理”中点击“创建应用”，选择应用类型（Web端、Android、iOS等），填写应用名称（如“公司官网地图”），勾选所需服务（如“JavaScript API”“地点搜索”等），提交后生成AK（需妥善保存）。
生成地图代码
基础地图嵌入
通过百度地图官方提供的“生成器”工具（https://lbsyun.baidu.com/index.php?title=open/custom）自定义地图：
- 设置中心点：输入经纬度或地址，例如北京市天安门（经度：116.397428，纬度：39.90923）。
- 缩放级别：范围1-19，数值越大显示越详细（默认10）。
- 地图类型：包括普通地图、卫星图、三维地图等。
- 自定义样式：可调整道路、建筑、水域的颜色等。
生成代码后,复制JavaScript代码片段，通常包含以下结构：
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script>
<div id="map" style="width: 100%; height: 500px;"></div>
<script type="text/javascript">
var map = new BMap.Map("map"); // 创建Map实例
var point = new BMap.Point(116.397428, 39.90923); // 初始化中心点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); // 添加缩放控件
</script>
高级功能配置
-
添加标记点：
使用BMap.Marker类添加自定义标记，可设置图标、信息窗口等：var marker = new BMap.Marker(point); // 创建标记 map.addOverlay(marker); // 将标记添加到地图 var infoWindow = new BMap.InfoWindow("内容"); // 信息窗口 marker.addEventListener("click", function(){ // 点击标记显示信息 map.openInfoWindow(infoWindow, point); }); -
绘制覆盖物：
支持折线、多边形、圆形等，例如绘制圆形：var circle = new BMap.Circle(point, 500, { // 圆心、半径（米）、样式 strokeColor: "blue", strokeWeight: 2, fillColor: "blue", fillOpacity: 0.3 }); map.addOverlay(circle); -
本地搜索：
调用BMap.LocalSearch实现周边POI搜索：var local = new BMap.LocalSearch(map); local.search("附近餐厅");
代码优化与注意事项
-
API版本选择
推荐使用v3.0版本（稳定且功能丰富），旧版本v1.0/2.0已停止维护。
（图片来源网络，侵删） -
服务配额限制
免费版AK有调用次数限制（如JavaScript API每日10万次），超出需升级付费套餐。 -
HTTPS协议支持
确保网站通过HTTPS访问，否则部分API可能因浏览器安全策略无法加载。 -
响应式适配
为地图容器设置width: 100%和height: auto，并通过CSS控制移动端显示高度：#map { height: 400px; } @media (max-width: 768px) { #map { height: 300px; } } -
错误处理
添加API加载失败提示：BMap.Map.prototype.enableMapClick = false; // 禁用默认点击提示
完整示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">百度地图示例</title>
<style>
#map { width: 100%; height: 500px; }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script>
<script>
var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); // 北京坐标
map.centerAndZoom(point, 15);
map.addControl(new BMap.NavigationControl());
// 添加标记
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 弹跳动画
// 信息窗口
var info = new BMap.InfoWindow("<b>北京市</b><br>欢迎访问！");
marker.addEventListener("click", function(){
map.openInfoWindow(info, point);
});
</script>
</body>
</html>
常见问题与调试
-
地图不显示
- 检查AK是否正确且未过期。
- 确认浏览器控制台无报错（如跨域问题）。
- 验证地图容器
id与代码中一致。
-
标记点偏移
若坐标偏差较大，需通过“拾取坐标系统”（https://api.map.baidu.com/lbsapi/getpoint/index.html）获取精确经纬度。
相关问答FAQs
Q1: 如何获取特定地址的经纬度？
A1: 可通过百度地图开放平台的“地理编码”API（需申请服务）或在线工具“拾取坐标系统”（https://api.map.baidu.com/lbsapi/getpoint/index.html）输入地址自动生成经纬度。
Q2: 免费AK的调用次数用尽怎么办？
A2: 登录百度地图控制台，在“应用管理”中升级套餐（如“基础版”升级至“专业版”），或创建多个AK分散调用压力，部分服务（如静态地图）可单独购买资源包。
