原文: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

js调用百度地图接口的更多相关文章

  1. js调用百度地图接口绘制任意多边形并获取每个点的经纬度等

    来自:https://blog.csdn.net/u013239236/article/details/52213977 侵删 <!DOCTYPE html> <html> & ...

  2. Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码

    (从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...

  3. Winform调用百度地图接口简单示例

    1.首先用一个html文件调用百度地图接口(主要注册一个序列号):   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  4. Winform调用百度地图接口

    using System; using System.IO; using System.Collections.Generic; using System.ComponentModel; using ...

  5. js调用百度地图api

    <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">   ...

  6. js 调用百度地图，并且定位用户地址，显示省市区街，经纬度

    网上的一些百度地图例子,基本上没有连套的 定位 例子.下面我分享一套我自己弄的,废话不多说,看代码,里面有注释! <!DOCTYPE html> <html> <head ...

  7. js调用百度地图API创建地图，搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  8. JS调用百度地图API标记地点

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. JS调用百度地图。

    必要条件:先注册百度开发者账号,然后申请调用地图的密钥(AK). 测试demo: 说明:百度开发平台上有很多demo,如下图:

随机推荐

  1. 用Python实现QQ找茬游戏外挂工具

    源地址:http://cpiz.net/blog/2012/03/a_qq_zhaocha_assistant_by_python/ (原创作品,转载请注明出处)好久没写技术相关的博文,这次写篇有意思 ...

  2. sqlplus连接登录数据库时，出现 ORA-28009错误(转)

    安装了oracle10g,打算用SQLPLUS 登录数据库进行操作.打开sqlplus后,可以看到要求输入用户名,口令和主机字符串.前面两个都知道,但是后一个却不明白,查了资料才知道是安装时的全局数据 ...

  3. How to append files to a .tar archive using Apache Commons Compress?（转）

    I created a copy of the tar archive and copied to entire content to it. Then I delete the old tar ar ...

  4. 开启程序的Visual Styles

    首先看看MS对Visual Styles的解释: Windows XP and later operating systems support a feature called visual styl ...

  5. Go的String转码包

    https://github.com/qiniu/iconv https://github.com/djimenez/iconv-go 这是与go不相干的转码包:https://github.com/ ...

  6. UVA - 11388 GCD LCM

    II U C   ONLINE   C ON TEST  Problem D: GCD LCM Input: standard input Output: standard output The GC ...

  7. uva 10003 Cutting Sticks(区间DP）

    题目连接:10003 - Cutting Sticks 题目大意:给出一个长l的木棍, 再给出n个要求切割的点,每次切割的代价是当前木棍的长度, 现在要求输出最小代价. 解题思路:区间DP, 每次查找 ...

  8. scala akka 修炼之路5(scala特质应用场景分析)

    scala中特质定义:包括一些字段,行为(方法/函数/动作)和一些未实现的功能接口的集合,能够方便的实现扩展或混入到已有类或抽象类中. scala中特质(trait)是一个非常实用的特性,在程序设计中 ...

  9. SWT中的多线程（Invalid thread access）

    最近在学习swt的东西,遇到一个问题,特转录如下. SWT异常: org.eclipse.swt.SWTException: Invalid thread access 在创建SWT界面的线程之外的线 ...

  10. Java中对不变的 data和object reference 使用 final

    Java中对不变的 data和object reference 使用 final 许多语言都提供常量数据的概念,用来表示那些既不会改变也不能改变的数据,java关键词final用来表示常量数据.例如: ...