dedecms添加百度地图API 3.0方法，支持动态放缩和https教程

摘要：dedecms添加百度地图大家常用的可能是1.0版本的api，现在百度地图已经升级到3.0版本了，使用更加方便，不管是http还是https都很好兼容，可动态放缩，详细方法如下……

 

不论你是什么样的网站，包括但不限于dedecms系统，只要调用百度动态地图api都需要有一个独立的密钥，开始之前先注册百度账号（如果已经有了直接登录即可），进行开发者实名认证，只有通过了实名认证才能获得创建应用的权限。

一、注册百度开放平台并实名认证

方法是打开百度开放平台：

http://lbsyun.baidu.com/apiconsole/key#/home

1. 登录或注册账号，然后点“控制台”进入个人中心进行实名认证，认证挺快的，而且基本上都可以通过。

2. 创建应用：进入个人中心，点“应用管理”---创建应用，下图所示。

3. 应用信息填写：下图所示，应用名称随便填，应用类型要选择“浏览器端”，不要选错了哦，Referer白名单按照说明把你的网站域名添加进去即可，比如本站“*.dfbazhu.com*”，注意星号代表的是该域名下的所有链接。

4. 你专有的ak密钥在应用这里都显示出来了，下图所示。

二、dedecms添加百度api代码

因为dedecms系统是网站，所以只能选择Javascript API来调用，打开dedecms系统/templets/default/article_article.htm文件（或者你需要显示地图的模板文件），在</head>代码的前面添加：

1. <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

将上面代码中“你的密钥”改为前面创建应用时获得的密钥，这里不要添加http或https前缀，像上面这样写默认对http和https的网站均支持，比较省事。

在需要显示百度动态地图的地方添加如下代码：

<div id="allmap" style="height: 400px;width: 600px"></div><!--div一定要设置宽和高-->
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point({dede:field name='mappoint'/});//dedecms自定义字段坐标
map.centerAndZoom(point, 9);//这里的数字9是地图默认放大倍数，数字越大越地图放大越大，可以填12、16等调试到自己喜欢的放大倍数
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);// 将标注添加到地图中

var label = new BMap.Label("{dede:field.shorttitle /}",{offset:new BMap.Size(20,-10)});
marker.setLabel(label);//地图上的标注文字，不要可以删除
label.setStyle({
 fontSize : "1rem",
 });

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>

上面代码中div的宽高可以使用css来控制。

三、dedecms后台设置自定字段，用于填写地图的坐标：

dedecms系统后台---频道模型---内容模型管理---（你的自定义模型）普通文章，点编辑---添加字段，按下图所示填写：

表单提示文字：地图坐标

字段名称：mappoint

保存之后，整个修改就大功告成了。

去对应栏目分类发布文章试试，地图坐标需要用到百度官方提供的坐标拾取工具，http://api.map.baidu.com/lbsapi/getpoint/index.html，可以直接输入地址即可获得坐标，将获得的坐标复制粘贴到文章的下图自定义字段这里即可。

更多关于百度地图api的帮助可以查看这里：http://lbsyun.baidu.com/index.php?title=jspopular3.0

放上实现后的截图，没写css，稍微有点丑：

整个实现的代码很简单也很方便，稍微麻烦一点的就是每次都要用坐标工具获得坐标，但是没有办法，只能这样。

另外需要注意的是：在本地测试时地图会无法显示出来，因为默认有域名的限制，即使取消域名限制本地测试还是不能显示出地图，所以设置好之后在服务器上测试才行。

文章中代码部分没展示全可以去原文查看https://www.dfbazhu.com/qd/dedecms/map_105.html

(责任编辑：陆柏熺)