js调用百度地图接口

简介: 原文:js调用百度地图接口   这是前几天公司做的新项目,上面需要用到地图的数据。第一次做这类型的东西没啥思路,咱们经理说,这东西简单,截个图存文件夹里调整好尺寸,数据库里存上图片的地址动态调用就行了。
原文: js调用百度地图接口

 

这是前几天公司做的新项目,上面需要用到地图的数据。第一次做这类型的东西没啥思路,咱们经理说,这东西简单,截个图存文件夹里调整好尺寸,数据库里存上图片的地址动态调用就行了。心想:恩,这方法好,不过...这么多地址,难道我要一张张截图,再打开ps调尺寸么?笔者很懒的好吧..

于是笔者就想了,能不能调用百度啊什么的地图接口呢?会不会很难呢?

好吧,到这里笔者就开始利用搜索引擎了。

 

搜出来的结果有很多,各个企业提供的接口也都有各自的特色,笔者比较喜欢百度提供的接口,功能比较全面,项目中笔者使用的是腾讯地图AIP,是因为跟这个项目的版面比较融合。在这里,为大家简单的演示一下百度地图接口的调用..其它的呢大家选择适合自己的去尝试一下。反正方法已经学到手了,你还怕什么?

首先给出一个百度地图API的链接,大家可以跟着教程先自己做一遍:http://developer.baidu.com/map/index.php?title=jspopular

点进去看标题:JavaScript API大众版,我们往下翻,选择地图展示点进去就是了。左边的下拉栏提供了很多关于地图的拓展功能,这里我就不一一去介绍,只给大家讲解最基本的,调用地图的方法,有兴趣的可以自己去尝试使用这些功能。

 

 

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  6. </style>
  7. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
  8. <title>地图展示</title>
  9. </head>
  10. <body>
  11. <div id="allmap"></div>
  12. </body>
  13. </html>
  14. <script type="text/javascript">
  15. // 百度地图API功能
  16. var map = new BMap.Map("allmap"); // 创建Map实例
  17. map.centerAndZoom(new BMap.Point(118.800398,32.078553), 19); // 初始化地图,设置中心点坐标和地图级别
  18. map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
  19. map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
  20. map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  21. </script>

上面这段代码,大家可以在获取密钥后,直接复制粘贴到记事本将密钥填入,后缀该为html双击即可访问。

关于密钥,首先得有一个百度账号,然后点击我上面发的那个链接,没错看标题:JavaScript API大众版就是它,进去我们看左上角会有一个获取密钥的链接,我们点一下。获取成功以后,我们点击创建应用,随便填就可以的。这时在查看应用里面,我找到“访问应用(AK)”所对应的一段密钥,复制粘贴到代码第七行对应的位置。此时打开编写好的html页面就可以显示地图的信息了。

 

 

此时,你会惊奇的发现,地图上显示的位置是南京玄武湖中间的一座小岛。傻了吧,想换地址是吧。很简单,我们看一下代码第十七行

map.centerAndZoom(new BMap.Point(118.800398,32.078553), 19);

其中118.800398,32.078553是玄武湖的坐标,而19表示的是地图缩放的级别,不明白什么是缩放级别的把19改成16,再进去看看就明白了。级别不是重点,重点是坐标我们怎么获取呢?这问题百度已经帮我们解决了,请往回看,我前面提到过一个左边工具栏,那里面就有生成坐标的js代码,自己研究一下。不想麻烦的话可以使用百度提供的可视化坐标转换工具,这里点进去就是了:http://api.map.baidu.com/lbsapi/getpoint/

 

文章最后提醒一句,需要注意的是,各个企业地图接口对应的坐标是不同的,就拿腾讯的和百度的来说,腾讯地图的坐标相对百度坐标向东北方向偏移了数公里,所以大家在这块一定要注意一下。另外,腾讯地图提供的坐标查询系统查询出来的坐标,跟代码中加入的坐标x、y轴是相反的,用的时候需要颠倒一下,对于有编程基础的朋友来说,写个字符串拆分再拼接的算法就行了。没编程基础的,就自己手动改吧。

附:腾讯地图坐标查询地址:http://lbs.qq.com/tool/getpoint/index.html

 

目录
相关文章
|
19天前
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
62 2
|
3月前
|
JavaScript 数据安全/隐私保护 Python
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
122 4
|
3月前
|
设计模式 存储 JavaScript
JS:单例模式 —— 百度考题 (二)
JS:单例模式 —— 百度考题 (二)
|
3月前
|
设计模式 JavaScript 前端开发
JS:单例模式 —— 百度考题 (一)
JS:单例模式 —— 百度考题 (一)
|
3月前
|
开发框架 文字识别 前端开发
基于百度智能云的OCR接口进行图文识别
基于百度智能云的OCR接口进行图文识别
|
3月前
|
JavaScript 前端开发 安全
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
62 0
|
3月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
60 0
|
4月前
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
187 1
|
4月前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
4月前
|
JavaScript
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件