帝国CMS地图功能怎么添加百度地图，如何调用？

2026-05-31

帝国CMS本身没有内置的地图功能，但你可以通过手动添加百度地图的API代码来实现地图展示。下面教你如何在内容页或自定义页面中调用百度地图。

一、申请百度地图API密钥

要使用百度地图，必须先获取一个API密钥（AK）：

访问百度地图开放平台（https://lbsyun.baidu.com）

注册并登录账号

进入“控制台” → “应用管理” → “创建应用”

填写应用名称，选择“浏览器端”，提交后获得AK密钥

二、生成地图代码

你可以使用百度地图的“工具生成器”快速生成嵌入代码：

进入“开发文档” → “API工具” → “地图生成器”

设置地图中心点坐标（可通过搜索地点获取经纬度）

调整缩放级别、地图样式、是否允许拖拽等参数

点击“生成代码”，复制HTML代码片段

三、在帝国CMS中插入地图

根据你的需求，可将地图插入到内容模板或自定义页面：

1. 后台进入“模板” → “公共模板变量” 或 “内容模板”

2. 找到你需要显示地图的内容页模板（如 article.index.temp.html）

3. 在适当位置粘贴你复制的百度地图HTML代码

4. 如果需要动态显示不同地点，可以结合字段（如地址、经纬度）用灵动标签调用

例如，在内容页模板中使用JS动态加载地图：

var map = new BMap.Map("baidu_map");

var point = new BMap.Point(116.404, 39.915); // 可替换为动态字段

map.centerAndZoom(point, 15);

map.addOverlay(new BMap.Marker(point));

map.enableScrollWheelZoom(true);

</script>

四、高级用法：结合字段动态显示地址

如果你在数据模型中添加了“经度”和“纬度”字段，可以用PHP或JS动态传值：

在数据库中增加字段：lat（纬度）、lng（经度）

发布信息时填写对应坐标

模板中使用 [!--lat--] 和 [!--lng--] 调用值

JS中读取这两个值初始化地图位置

学到了()