原文: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. hdu 4034 Graph

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4034 题目分类:图论 题意:n个顶点,然后给出从i到j的最短路径长度,求至少需要哪些边 第二组样例 第 ...

  2. 不断摸索发现用 andy 模拟器很不错，感觉跟真机差不多

    嗯,今天也遇到了模拟的问题.那个慢啊,好几分钟才能开机,加载程序总共差不多十几分钟.当时想如果真做android开发必须换电脑啊.后来不断摸索发现用 andy 模拟器很不错,感觉跟真机差不多. 还是真 ...

  3. 14.4.3.2 Configuring Multiple Buffer Pool Instances 配置多个buffer pool 实例:

    14.4.3.2 Configuring Multiple Buffer Pool Instances 配置多个buffer pool 实例: 对于系统 buffer pool 有多个G的范围, 把b ...

  4. Direct UI

    在界面开发中,眼下DirectUI是个热门的技术名称,由于众多的知名公司都是用DirectUI方式作出了非常炫丽的界面.而对于大多数熟悉Win32控件,熟悉MFC开发的开发者来说,我们应该做何选择? ...

  5. 我为什么要创建帮创业者找合伙人的缘创派（ycpai.com）？

    我为什么要创建帮助创业者找合伙人的缘创派(ycpai.com)? 在我发出第一条离开CSDN出来创业的微博后,感谢各位朋友的鼓励.很多朋友问我一些问题,我在这里一并回答,并简单阐述一下我的理念. 问: ...

  6. Eclipse 每次打开workspace目录记录位置？

    E:\eclipse_j2ee eclipse安装根目录 在这个文件下: E:\eclipse_j2ee\configuration\.settings\org.eclipse.ui.ide.pref ...

  7. MTK Android Driver：GPIO

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2JrODYxMTEw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  8. 无状态TCP的ip_conntrack

    Linux的ip_conntrack实现得过于沉重和精细.而实际上有时候,根本不需要在conntrack中对TCP的状态进行跟踪,只把它当UDP好了,我们的需求就是让系统可以将一个数据包和一个五元组标 ...

  9. mysql left join,right join,inner join用法分析

    下面是例子分析表A记录如下: aID        aNum 1           a20050111 2           a20050112 3           a20050113 4   ...

  10. autoit 处理文件上传弹出框,并在JAVA中调用

    Java  代码 //定义exe 文件存放的绝对路径 File file2 = new File("."); String command = file2.getCanonical ...