原文: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. EXTJS4两个ComboBox的数据源联动，解决遇到第二个ComboBox第二次以后显示忙的状态问题

    定义如下[红色部分是后加上的,它是解决问题的关键]: var bu_store = Ext.create('Ext.data.Store', { fields: ['key', 'value'], r ...

  2. Eclipse下Android编程代码自动提示

    在用Eclipse进行Android编程,为了代码自动提示,需要进行如下操作: 1.设置 java 文件的代码提示功能 打 开 Eclipse 依次选择 Window > Preferences ...

  3. 管理工具 Kafka Manager

    管理工具 Kafka Manager   一.概述 Kafka在雅虎内部被很多团队使用,媒体团队用它做实时分析流水线,可以处理高达20Gbps(压缩数据)的峰值带宽. 为了简化开发者和服务工程师维护K ...

  4. 日交易41.9亿，B2B的魅力为何不输于B2C、C2C？

        在最近两年的电子商务版图中,B2C和C2C可谓大放异彩,相比之下,B2B却显得颇为“低调”,当然,低调并不代表没有影响力,只不过,相比B2C和C2C面向数亿网民而言,B2B只针对企业和商家服务 ...

  5. 图像特征提取方法：Bag-of-words

    Bag-of-words简单介绍 最初的Bag-of-words ,也叫做"词袋",在信息检索中,Bag-of-words model假定对于一个文本,忽略其词序和语法,句法,将其 ...

  6. POJ 2826 An Easy Problem?! 好的标题

    受该两块木板以形成槽的效果.Q槽可容纳雨水多,注意雨爆跌,思想是非常easy,分类讨论是有点差. 1.假定两条线段不相交或平行,然后再装0: 2.有一个平行x轴.连衣裙0. 3.若上面覆盖以下的,装0 ...

  7. POJ--3268--Silver Cow Party【SPFA+邻接表】

    题意:一些牛要去某一点參加聚会,然后再回到自己家,路是单向的,问花费时间最多的那头牛最少须要花费多长时间. 思路:从聚会地点返回,相当于是从某一点到其它各个点的最短路径.从牛的家中走到聚会地点,能够把 ...

  8. Docker 用法总结之:管理工具 shipyard 的具体使用指南

    Docker 的命令行就已经非常好用了,假设非要加上基于 Web 的管理界面的话也有一些选择,如 DockerUI (Angular.js), Dockland (Ruby), Shipyard (P ...

  9. 西南民大oj（矩阵快速幂）

    我的名字不可能那么难记 时间限制(普通/Java) : 1000 MS/ 3000 MS          运行内存限制 : 65536 KByte总提交 : 16            测试通过 : ...

  10. 【LeetCode】Reorder List 解题报告

    Given a singly linked list L: L0→L1→-→Ln-1→Ln, reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→- You must do th ...