巅峰霸主 > 设计开发 > 织梦教程 >

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

时间:2020-04-23 01:56:59  来源:巅峰霸主  作者:烈火大地 点击:
摘要:dedecms添加百度地图大家常用的可能是1.0版本的api,现在百度地图已经升级到3.0版本了,使用更加方便,不管是http还是https都很好兼容,可动态放缩,详细方法如下……

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

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

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

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

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

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

image.png

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

image.png

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

image.png

二、dedecms添加百度api代码

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

<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

搜狗截图20200422232548.png

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

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

image.png

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

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

image.png

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

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

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部