百度地图API目前在地图API领域越来越受到众多开发者的关注，许多应用都使用到了百度地图API服务,包括博主me，我自己使用做的是Javascript API，根据经验，我想整理出一份系列教程，如果能给想使用百度地图API的开发者带来一点帮助的话，那就太好了，也希望大家能够互相交流，共同学习。

写在前面的话：如果各位真的想深入了解地图的JSAPI，首先一些基础的GIS概念必不可少，GIS就是地理信息系统，可能很多程序猿没听过，简单地说，GIS就是通过计算机软件技术将地理信息进行可视化管理，地图就是一个最重要的地理信息应用。涉及到地图的GIS基础概念，首先有投影、坐标系、坐标转换、瓦片图和矢量图。先不要晕，更复杂还在后面呢。

　　现在很多网络地图都是使用Web墨卡托投影当做主要的投影方法，包括Google Map和百度地图，具体的投影原理和方法这里就不脑补了。百度百科就解释的很清楚。想了解细节的可以去深入挖掘。投影的目的就是讲球面的形状显示在平面的显示器上形成地图，投影之后的地图就有自己的坐标系统。比如很多人都知道的经纬度坐标系来描述地球上的某一位置。而百度地图API中的涉及到的坐标系就不仅仅只有经纬度坐标系了。

　　你需要了解到以下的坐标系：

  • 经纬度：通过经度纬度来描述某一点位置。如BMap.Point(116.404, 39.915)。注意：一般GPS设备获取的经纬度属于WGS84坐标系。在国内地图厂商使用的经纬度坐标都不是WGS84经纬度坐标，都是经过gc02加密之后的。而百度地图在gc02加密的基础上又进行一次bd09加密。所以使用原始GPS获取的经纬度直接在百度地图上进行打点的话就会有偏移。使用原始的GPS经纬度坐标在地图上打点需要先调用百度地图的Geoconv API 对原始坐标进行坐标转换。传送门：坐标转换API。
  • 平面坐标：球面的形状通过投影变换成平面上的形状，在平面，就需要一个平面坐标系来描述某一个位置，百度地图API默认使用墨卡托投影。投影之后就有一个平面坐标系。在百度地图API中，平面坐标就是想象成把球形展开在一张平面上，坐标原点和经纬度原点一致，赤道和0度经线相交的位置。百度地图API将地图分为了18个级别，平面坐标是以最大的级别18级为准的，也就是说在18级下，平面坐标的一个单位就代表了屏幕上的1个像素。平面坐标与地图所展示的级别没有关系，也就是说在1级和18级下，天安门位置的平面坐标都是一致的。那么如何知道某个位置的平面坐标呢？可通过BMap.MercatorProjection类来完成，该类提供经纬度与平面坐标互相转换的方法。例如天安门的经纬度大约为116.404, 39.915，经过转换即可得到平面坐标： 
     var projection =new BMap.MercatorProjection();
    
 var point = projection.lngLatToPoint(new BMap.Point(116.404, 39.915));
    
 alert(point.x +", "+ point.y);

    最后得到的结果就是：12958175,4825923.77。

  • 像素坐标：像素坐标表示的是在某一缩放级别下位置的显示坐标，在18级别下，像素坐标可以通过将平面坐标向下取整得到，对，像素坐标都是整数值。因为它代表中屏幕上的像素值。在其他的级别下，我们可以使用如下公式获取像素坐标。
    像素坐标 = Math.floor(平面坐标 * 2zoom-18)
  • 图块坐标：百度地图API在网页上显示地图的时候是将整个地图切分成若干块地图瓦片来显示的，每一个地图显示级别都包含若干块瓦片图。图块坐标表示的就是某一级别下的某一张瓦片图，有三个属性，x, y, z。z表示缩放级别。x,y 表示坐标。x,y的计算如下所示：
    图块坐标 = 像素坐标 / 256
    因为百度地图中每一张瓦片图的大小都是256*256的。所以像素坐标/256就可以得到需要在平面上显示的图块坐标了。下面一张图或许更容易理解。                             
    还是以像素坐标原点（等于平面坐标原点)以基准，先计算像素坐标值，然后再计算得到点所在的图块坐标。注意，不同的缩放级别下，相同的点所在的图块坐标是不一样的。
  • 可视区坐标：这个坐标肯定是大家会经常用到的，它就是相对于你的地图容器的坐标，地图容器就是初始化地图的时候传入的Dom元素，原点是这个Dom元素的左上角，在实际的开发过程中，可以使用API中的Map类的pointToPixel和PixelToPoint方法将经纬度和可视区坐标进行相互转化。
  • 覆盖物坐标：这个坐标相对来说使用的场景较少,覆盖物在实现上就是若干DOM元素，这些元素会被放在若干覆盖物容器内，那么覆盖物的坐标实际上就是相对于这些覆盖物容器的坐标。在地图初始化完成后，覆盖物容器的左上角与地图可视区域左上角位置相同，一旦地图被移动、缩放，覆盖物容器位置就会发生变化。在自定义覆盖物的时候API提供经纬度信息，而开发者需要自行将经纬度转换为覆盖物的像素坐标，从而覆盖物才能显示在正确的位置上。可以使用API中的Map类的pointToOverlayPixel和overlayPixelToPoint两个方法来实现。

这些坐标系统，在地图API开发中肯定会经常用到，如果对这些基础概念不是很了解的话可能有时候就会产生疑惑，甚至在一些功能开发上找不到思路。如果深入理解了基础概念，那么在使用地图API开发的过程中就能够熟练的运用API提供的一些方法。

说了这么多，来个代码示例给大家回顾一下概念：

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

     <title>Map Coordinate</title>

     <style type="text/css">

     /*<![CDATA[*/

     html {

         height: 100%;

     }

     body {

         height: 100%;

         margin: 0px;

         padding: 0px;

     }

     #map_container {

         height: 100%;

     }

     /*]]>*/

     </style>

 </head>

 <body>

     <div id="map_container"></div>

 </body>

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wWy2A8K94nhntYTYUHS19RXW"></script>

 <script type="text/javascript">

 var mp = new BMap.Map('map_container', {

     enableHighResolution: true

 });

 mp.centerAndZoom('北京', 15);

 mp.enableScrollWheelZoom();

 var TILE_SIZE = 256;

 mp.addEventListener('click', function(e) {

     var info = new BMap.InfoWindow('');

     var pos = e.point;

     var projection = this.getMapType().getProjection();

     var lngLatStr = "经纬度：" + pos.lng + ", " + pos.lat;

     var worldCoordinate = projection.lngLatToPoint(pos);

     var worldCoordStr = "<br />平面坐标：" + worldCoordinate.x + ", " + worldCoordinate.y;

     var pixelCoordinate = new BMap.Pixel(Math.floor(worldCoordinate.x * Math.pow(2, this.getZoom() - 18)),

         Math.floor(worldCoordinate.y * Math.pow(2, this.getZoom() - 18)));

     var pixelCoordStr = "<br />像素坐标：" + pixelCoordinate.x + ", " + pixelCoordinate.y;

     var tileCoordinate = new BMap.Pixel(Math.floor(pixelCoordinate.x / 256),

         Math.floor(pixelCoordinate.y / 256));

     var tileCoordStr = "<br />图块坐标：" + tileCoordinate.x + ", " + tileCoordinate.y;

     var viewportCoordinate = mp.pointToPixel(pos);

     var viewportCoordStr = "<br />可视区域坐标：" + viewportCoordinate.x + ", " + viewportCoordinate.y;

     var overlayCoordinate = mp.pointToOverlayPixel(pos);

     var overlayCoordStr = "<br />覆盖物坐标：" + overlayCoordinate.x + ", " + overlayCoordinate.y;

     info.setContent(lngLatStr + worldCoordStr + pixelCoordStr + tileCoordStr +

         viewportCoordStr + overlayCoordStr);

     mp.openInfoWindow(info, pos);

 });

 </script>

 </html>

浏览器运行，然后鼠标点击地图上某一位置后，弹框如下：

结语：在使用百度地图API开发的过程中，坐标系的概念非常重要，因为涉及到在地图上显示，而很多时候开发者拿到的坐标都是经纬度坐标，甚至都是GPS坐标，这些坐标数据要想在百度地图上标注出正确的位置，一定要记的按照上述的坐标系概念进行转换。要不然结果是不准确的。好了，后续，我会陆续发出关于如何使用地图API开发，介绍百度地图API的一些js原理的系列文章。

深入浅出百度地图API开发系列（1）：前言的更多相关文章

  1. 深入浅出百度地图API开发系列（2）：创建地图

    上一篇文章里,先介绍了一下百度地图API开发所涉及到的一些基础概念,包括投影,坐标系等基础概念,再有了这些基础后,我们可以开始开发自己的web地图了.先来个代码示例(建议大家都是用百度地图API大众版 ...

  2. 深入浅出百度地图API开发系列（3）：模块化设计

    在前面两张简单介绍了百度地图API的基础知识和使用之后,我们来分析一下百度地图API的基本架构,了解一下基本架构可以帮助我们更清晰的了解API的功能和调用过程,也就可以帮助我们在实际开发中可以更方便的 ...

  3. 基于MFC与第三方类CWebPage的百度地图API开发范例

    在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地 ...

  4. 百度地图API开发指南

    简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...

  5. 百度地图API开发一——仿照现有测距效果实现测面功能

      最近做了一个百度地图API的开发项目,里面有测量距离和测量面积的功能需求.测量距离百度给出了封装好的javascript包——BMapLib.DistanceTool,效果如下: 这个效果体验很好 ...

  6. android 基于百度地图api开发定位以及获取详细地址

    一:百度地图开发必须要到百度开发平台android开发api下载相应的库,已经申请百度地图开发key. 二:新建项目baidumaplocation.设计main.xml文件这里注意的是MapView ...

  7. 百度地图API开发----手机地图做导航功能

    第一种方式:手机网页点击打开直接进百度地图APP <a href="baidumap://map/direction?mode=[transit:公交,driving:驾车]& ...

  8. 百度地图API开发的快速使用和大量坐标点操作【点聚合，海量点，mapv】

    快速上手 注意:本篇文章代码是基于 百度地图 JavaScript API v3.0 的条件下编写,GL版本可能稍有变化. 地图嘛,很重要的一部分就是坐标经纬度了: 经度: 英文 longitude ...

  9. 百度地图API开发

    1.首先申请百度地图秘钥 http://lbsyun.baidu.com/ 2.需要填一个申请的界面 3.申请后会有类似的东西 4.之后参照以下网址进行MFC编译 mfc webbrowser控件使用 ...

随机推荐

  1. web.config里面使用configSource

    在asp.net中如果修改了配置文件web.config以后,会导致应用程序重启,所有回话(session)丢失掉,在 .NET Framework 2.0 以后的版本中,可以在一个单独文件中包括所有 ...

  2. git and github学习笔记

    1.git的状态分为working status,stage status和commit status.git diff查看的是working status和 stage status之间的不同,gi ...

  3. php学习笔记1--开发环境搭建:apache+php+mysql

    php开发环境搭建:apache + php + mysql1.下载apache,php及mysql安装包2.安装apache:下载的apache若是.msi可直接双击,按指示一步一步安装:(若操作系 ...

  4. VpnService

    这段时间项目中使用到了VpnService,整理了一下官方文档的资料 VpnService is a base class for applications to extend and build t ...

  5. Apache2.4 与 PHP 5.5 64位版的安装配置

    我的环境:windows7 旗舰版 64位 首先下载相关文件: php 5.5.0 windows 64版 http://windows.php.net/download/#php-5.5 (选择 6 ...

  6. iOS数据持久化-SQLite数据库使用详解

    使用SQLite数据库 创建数据库 创建数据库过程需要3个步骤: 1.使用sqlite3_open函数打开数据库: 2.使用sqlite3_exec函数执行Create Table语句,创建数据库表: ...

  7. 【学习笔记】Xcode常见设置

    一.设置主题和字体大小    二.设置显示代码行号

  8. AMQ学习笔记 - 17. 事务的测试

    概述 对事务机制进行测试. 测试实例 测试实例 结果预测 发送正常 3条消息入队 发送异常 0条消息入队 接收正常 3条消息出队 接收异常 0条消息出队 demo设计 设计图 测试分工 测试类 测试方 ...

  9. 阿里云服务器 ECS Ubuntu系统安装配置

    1. 登陆服务器 系统开通成功后手机会收到阿里云发来的短信,包含公网IP及root登录密码. WEB管理后台方式 可通过阿里云管理后台选择“连接管理终端…”进行登录 提示输入VNC密码 登录成功后显示 ...

  10. [大牛翻译系列]Hadoop（15）MapReduce 性能调优：优化MapReduce的用户JAVA代码

    6.4.5 优化MapReduce用户JAVA代码 MapReduce执行代码的方式和普通JAVA应用不同.这是由于MapReduce框架为了能够高效地处理海量数据,需要成百万次调用map和reduc ...