dede 百度地图插件-DEDE建站-盈思创科技

DedeCMS（织梦CMS）本身并没有一个官方的、叫做“百度地图插件”的东西。 我们通常所说的“插件”，其实是指为DedeCMS开发的、可以集成百度地图功能的扩展模块或自定义代码。

（图片来源网络，侵删）

这些“插件”的实现方式主要有以下几种，我会为你逐一介绍,并提供最常用和最推荐的方案。

使用第三方开发的Dede插件（最省事，但需谨慎）

这是最符合“插件”概念的方案,网上有很多开发者制作了可以在Dede后台一键安装的百度地图插件。

优点：

安装简单： 通常上传文件后,在后台执行安装向导即可。
功能集成： 可能在后台有专门的设置界面,方便管理。
模板调用方便： 提供简单的标签，如 {dede:baidumap},直接在模板中调用。

缺点：

（图片来源网络，侵删）

安全性风险： 这是最大的问题，来源不明的插件可能包含后门代码,有安全风险。
兼容性问题： 可能与你的Dede版本或其他插件不兼容。
更新停滞： 很多第三方插件开发后不再维护，当百度地图API更新时,插件可能会失效。
功能可能过时： 很多插件还在使用旧的百度地图API v1.2，而百度早已推荐使用功能更强大、更稳定的API v2.0。

如何寻找： 你可以在百度搜索“DedeCMS 百度地图插件”、“织梦百度地图模块”等关键词，会找到一些下载网站，如Dede58、织梦吧等。

使用建议：

优先选择知名网站下载。
安装前务必用杀毒软件扫描插件文件。
从官方渠道或可信的博客下载。

手动集成百度地图API（最推荐、最灵活、最稳定）

这是目前最主流、最推荐的方法，它不是一个“插件”，而是通过修改Dede的模板文件，直接调用百度官方的JavaScript API来嵌入地图，这种方法安全、灵活,且能使用最新的地图功能。

实现步骤：

（图片来源网络，侵删）

第1步：获取百度地图密钥 (AK)

访问百度地图开放平台： https://lbsyun.baidu.com/
注册/登录账号。
进入“控制台” -> “应用管理” -> “创建应用”。
填写应用信息：
- 应用名称： 填写你的网站名称，如“我的织梦网站”。
- 应用类型： 选择“浏览器端”。
- 启用服务： 勾选“JavaScript API”。
- Referer白名单： 这是最关键的一步！ 填写你的网站域名，www.yourdomain.com 或 (不推荐，不安全)，填写后,只有这个域名下的页面才能调用你的API密钥。
创建成功后，你会得到一个“访问应用(AK)”，这就是你的密钥，请复制保存。

第2步：修改Dede模板文件

我们通常在页 (article_article.htm) 和列表页 (list_article.htm) 中需要显示地图。页为例：**

打开模板文件： 在Dede后台，进入“模板” -> “默认模板管理” -> 找到并编辑 article_article.htm 文件。
准备数据：
- 确保你的文章模型中有用于存储地址的字段，如果没有，你需要去“后台” -> “核心” -> “内容模型管理” -> “普通文章” -> “字段管理” -> “添加新字段”。
- 字段名建议为 address，数据类型为“文本”,字段长度根据需要设定。
- 发布文章时，在“自定义字段”部分填写具体的地址，如“北京市海淀区中关村大街1号”。

在模板中插入地图HTML和JS代码：

在 article_article.htm 文件中，你希望显示地图的位置（文章标题下方或内容下方）,插入以下代码。

<!-- 百度地图容器 -->
<div id="baidu-map-container" style="width: 100%; height: 400px; margin: 20px 0;"></div>
<!-- 引入百度地图JavaScript API v2.0 -->
<script type="text/javascript">
    // 注意：这里的 'YOUR_AK' 替换成你刚刚获取的密钥
    var ak = "YOUR_AK"; 
    // 使用Dede的标签获取当前文章的地址字段值
    var address = "{dede:field name='address'/}";
    // 创建地图实例
    var map = new BMap.Map("baidu-map-container");
    // 初始化地图，设置中心点和缩放级别
    // 如果地址不为空，则尝试解析地址并定位；否则，默认定位到北京
    if (address) {
        var localSearch = new BMap.LocalSearch(map);
        localSearch.setSearchCompleteCallback(function (searchResult) {
            if (searchResult.getNumPois() > 0) {
                var poi = searchResult.getPoi(0);
                map.centerAndZoom(poi.point, 15); // 定位到第一个搜索结果，缩放级别15
                // 创建一个标记
                var marker = new BMap.Marker(poi.point);
                map.addOverlay(marker);
                // 创建信息窗口
                var infoWindow = new BMap.InfoWindow(address);
                marker.addEventListener("click", function () {
                    this.openInfoWindow(infoWindow);
                });
            } else {
                // 如果地址解析失败，默认定位到北京
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
            }
        });
        localSearch.search(address);
    } else {
        // 如果没有地址，默认定位到北京
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    }
    // 启用滚轮缩放
    map.enableScrollWheelZoom(true);
    // 添加地图控件
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
</script>

代码解释：

div#baidu-map-container：这是地图显示的容器,你可以通过CSS控制它的宽高。
script标签：引入百度API的核心脚本。
var ak = "YOUR_AK"：务必替换成你自己的密钥。
var address = "{dede:field name='address'/}";：这是Dede模板的精髓，它会自动获取当前文章 address 字段的值。
后续的JavaScript代码负责：
- 创建地图对象。
- 使用 BMap.LocalSearch 根据地址进行搜索和定位。
- 在定位点上添加一个标记 (Marker)。
- 点击标记时显示一个信息窗口 (InfoWindow为地址。
- 添加缩放控件和比例尺控件,提升用户体验。

保存模板并更新： 保存 article_article.htm 文件，然后在Dede后台“更新系统”中，选择“更新HTML”,重新生成文章页面。

使用Dede自定义表单（适用于“联系我们”等固定页面）

如果你的网站需要一个固定的“联系我们”页面，并显示公司地址的地图，那么方法更简单,不需要复杂的动态解析。

创建一个静态页面模板，contact.htm。
在模板中，直接写死地址,调用百度地图API。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">联系我们</title>
    <!-- 引入百度地图API -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>
</head>
<body>
    <h1>联系我们</h1>
    <p>公司地址：北京市海淀区中关村大街1号</p>
    <!-- 百度地图容器 -->
    <div id="map" style="width: 100%; height: 500px;"></div>
    <script type="text/javascript">
        // 创建地图实例
        var map = new BMap.Map("map");
        // 创建点坐标
        var point = new BMap.Point(116.308474, 39.983409); // 这是中关村大街1号的大概坐标，你可以用百度地图拾取坐标工具获取更精确的
        // 初始化地图，设置中心点和缩放级别
        map.centerAndZoom(point, 15);
        // 创建标记
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        // 创建信息窗口
        var infoWindow = new BMap.InfoWindow("北京市海淀区中关村大街1号");
        marker.openInfoWindow(infoWindow);
        // 启用滚轮缩放
        map.enableScrollWheelZoom(true);
    </script>
</body>
</html>

这种方法的坐标是固定的,适合展示公司总部等位置不变的场所。

总结与对比

方案	优点	缺点	适用场景
第三方插件	安装简单，一键搞定	安全风险高，可能过时，不灵活	对技术不了解，愿意承担风险，且地图功能非常简单的用户。
手动集成API	安全、灵活、稳定、功能强大	需要一定的HTML和JS基础，操作稍复杂	强烈推荐！适用于绝大多数需要动态显示地图的场景，如文章列表、详情页。
自定义表单/静态页	实现简单，代码量少	不灵活，坐标固定	适用于“联系我们”、“公司地址”等固定位置展示的页面。

最终建议：

对于绝大多数DedeCMS用户，方案二（手动集成百度地图API）是最佳选择，它虽然需要你手动修改模板，但能确保网站的安全性和功能的先进性，并且一旦掌握,以后再集成其他地图或功能都会变得非常容易。

dede 百度地图插件

使用第三方开发的Dede插件（最省事，但需谨慎）

手动集成百度地图API（最推荐、最灵活、最稳定）

第1步：获取百度地图密钥 (AK)

第2步：修改Dede模板文件

使用Dede自定义表单（适用于“联系我们”等固定页面）

总结与对比

相关文章

目录[+]