原文: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. 步步为营Hibernate全攻略（四）剪不断理还乱之：复合主键 && 组合映射

    一:复合主键 复合主键即两个或多个字段联合起来作为主键,它的通常做法是将主键相关字段抽取出来放到一个单独的类中,但是这样的类是有要求的: 1.      必须实现序列化接口 2.      必须覆盖e ...

  2. windows下搭建node.js及npm的工作环境

    近期在研究数据可视化D3框架,决定在windows下搭建一个nodejs及npm的工作环境,在网上查了n篇文章,别管是编译源代码安装也好.还是使用node.msi格式安装包也好,总是有问题.终于,功夫 ...

  3. HNCU1100:彩票

    http://hncu.acmclub.com/index.php?app=problem_title&id=111&problem_id=1100 题目描述 有一种彩票的玩法是从1~ ...

  4. SetCapture ReleaseCapture

    函数功能:该函数在属于当前线程的指定窗体里设置鼠标捕获.一旦窗体捕获了鼠标,全部鼠标输入都针对该窗体,不管光标是否在窗体的边界内.同一时刻仅仅能有一个窗体捕获鼠标.假设鼠标光标在还有一个线程创建的窗体 ...

  5. cocos2d-js-v3.0-rc0 下 pomelo-cocos2d-jsb native web 配置

    一.基本步骤 注意:pomelo-cocos2d-jsb 没实用 https://github.com/NetEase/pomelo-cocos2d-jsb,原因这个不是最新版,另外,componen ...

  6. 【剑指offer】面试题24：二叉搜索树的兴许前序遍历序列

    分析: 前序: 根 左 右 后序: 左 由 根 二叉搜索树: 左 < 根 < 右 那么这就非常明显了. def ifpost(postArray, start, end): #one or ...

  7. Android 自己定义View (二) 进阶

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24300125 继续自己定义View之旅.前面已经介绍过一个自己定义View的基础 ...

  8. 从尾到头打印链表--《剑指offer》

    题目:非常easy,就是题目,将链表从尾到头打印出来. 可能我们首先想到的是将链表进行遍历,将之前的訪问的数据进行保存,最后进行反向输出,但是保存数据的空间是个问题:或者是我们将整个链表进行反向操作, ...

  9. delphi 发送消息控制滚动条

    1.Perform 函数 DBGrid1.Perform(WM_VSCROLL,SB_PAGEDOWN,0);  //控制滚动条,向后翻页 DBGrid1.Perform(WM_VSCROLL,SB_ ...

  10. Python的Tkinter将窗口置顶

    root = Tk()root.wm_attributes('-topmost',1)