1、获取百度舆图秘钥(AK)
百度舆图开放平台网址是
https://lbsyun.baidu.com/
注册账号,点击“开拓文档”--“JavaScript API”--申请“个人开拓者”,根据提示提交资料,注册账号。
在后台“运用管理”--“我的运用”--创建运用。在页面中的“运用类型”选择“浏览器端”,添加许可调用的网站域名,提交审核,得到密钥(AK)。
2、获取地址的经度和维度坐标
舆图拾取坐标系统网址
http://api.map.baidu.com/lbsapi/getpoint/index.html
定位到公司详细地址,会自动涌现该位置的经度和维度数值,保存该数值。
3、制作舆图坐标页面
这里供应优化后的舆图坐标显示效果代码,如下:
<!DOCTYPE html><html><head><meta charset=34;utf-8"><!-- 适应移动端页面展示 --><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><title>网站调用舆图坐标</title><script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您申请到的秘钥AK"></script><style type="text/css">/ 设置容器样式 /#dituContent {height: 500px;width: 100%;}.mapContent {width: 240px;height: 100px;position: relative;top: -30px;}.BMap_bubble_content {overflow: visible !important;}.mapContent .title {width: 100%;font-size: 18px;color: #333;font-weight: 600;}.mapContent .main {}.mapContent .main p {margin: 0;padding: 0;}</style></head><body><!-- 舆图容器 --><div id="dituContent"> </div><script type="text/javascript">var longitude = '117.307712'; //经度var latitude = '31.869903'; //纬度// 创建图文信息窗口var sContent = `<div class="mapContent"><div class="title">孙健事情室</div><div class="main"><p>联系人:姓名</p><p>联系办法:XXXXXX</p><p>详细地址:公司所在地详细地址</p></div></div>`;// 创建舆图实例var map = new BMapGL.Map("dituContent");// 设置中央点坐标var point = new BMapGL.Point(longitude, latitude);// 舆图初始化,同时设置舆图展示级别map.centerAndZoom(point, 18);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);// 创建添加点标记var marker = new BMapGL.Marker(point);map.addOverlay(marker);// 创建信息窗口工具var infoWindow = new BMapGL.InfoWindow(sContent);// 打开信息窗口map.openInfoWindow(infoWindow, map.getCenter());// marker添加点击事宜marker.addEventListener('click', function() {this.openInfoWindow(infoWindow);// 图片加载完毕重绘infoWindowdocument.getElementById('imgDemo').onload = function() {infoWindow.redraw(); // };})</script></body></html>
把上面的代码复制下来,在自己电脑里,新建TXT文档,把该代码粘贴进去,修正代码里的“秘钥AK”、“经度”、“维度”为你的。
然后,名字可以命名为ditumap,把该文件的后缀txt,修正为html,名字全称便是ditumap.html,TXT文档就自动转换为网页文件了。
4、调用制作好的舆图坐标网页
利用FTP软件,把文件上传到网站空间得当位置,并记住该路径。
进入网站管理后台,打开须要某个须要调用舆图页面的文章,利用下面的iframe标签代码,远程调用舆图文件。
<iframe style="border:none;" src="舆图文件的绝对路径" width="100%" height="450px" frameborder="0" scrolling="no"></iframe>
在代码里,设置舆图文件的绝对路径,调度显示的宽度和高度。
通过上面的设置,网站就可以调用百度舆图坐标系统了,你也赶紧试试吧,很好玩的^_^