深入浅出百度地图API开发系列（1）：前言
百度地图API目前在地图API领域越来越受到众多开发者的关注，许多应用都使用到了百度地图API服务,包括博主me，我自己使用做的是Javascript API，根据经验，我想整理出一份系列教程，如果能给想使用百度地图API的开发者带来一点帮助的话，那就太好了，也希望大家能够互相交流，共同学习。
写在前面的话：如果各位真的想深入了解地图的JSAPI，首先一些基础的GIS概念必不可少，GIS就是地理信息系统，可能很多程序猿没听过，简单地说，GIS就是通过计算机软件技术将地理信息进行可视化管理，地图就是一个最重要的地理信息应用。涉及到地图的GIS基础概念，首先有投影、坐标系、坐标转换、瓦片图和矢量图。先不要晕，更复杂还在后面呢。
现在很多网络地图都是使用Web墨卡托投影当做主要的投影方法，包括Google Map和百度地图，具体的投影原理和方法这里就不脑补了。百度百科就解释的很清楚。想了解细节的可以去深入挖掘。投影的目的就是讲球面的形状显示在平面的显示器上形成地图，投影之后的地图就有自己的坐标系统。比如很多人都知道的经纬度坐标系来描述地球上的某一位置。而百度地图API中的涉及到的坐标系就不仅仅只有经纬度坐标系了。
你需要了解到以下的坐标系：
这些坐标系统，在地图API开发中肯定会经常用到，如果对这些基础概念不是很了解的话可能有时候就会产生疑惑，甚至在一些功能开发上找不到思路。如果深入理解了基础概念，那么在使用地图API开发的过程中就能够熟练的运用API提供的一些方法。
说了这么多，来个代码示例给大家回顾一下概念：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <meta content="initial-scale=1.0, user-scalable=no" /> 7 <title>Map Coordinate</title> 8 <style type="text/css"> 9 /*<![CDATA[*/ 10 11 html { 12 height: 100%; 13 } 14 body { 15 height: 100%; 16 margin: 0px; 17 padding: 0px; 18 } 19 #map_container { 20 height: 100%; 21 } 22 /*]]>*/ 23 </style> 24 25 </head> 26 27 <body> 28 <div></div> 29 </body> 30 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wWy2A8K94nhntYTYUHS19RXW"></script> 31 <script type="text/javascript"> 32 var mp = new BMap.Map(‘map_container‘, { 33 enableHighResolution: true 34 }); 35 mp.centerAndZoom(‘北京‘, 15); 36 mp.enableScrollWheelZoom(); 37 38 var TILE_SIZE = 256; 39 40 mp.addEventListener(‘click‘, function(e) { 41 var info = new BMap.InfoWindow(‘‘); 42 var pos = e.point; 43 var projection = this.getMapType().getProjection(); 44 var lngLatStr = "经纬度：" + pos.lng + ", " + pos.lat; 45 var worldCoordinate = projection.lngLatToPoint(pos); 46 var worldCoordStr = "<br />平面坐标：" + worldCoordinate.x + ", " + worldCoordinate.y; 47 var pixelCoordinate = new BMap.Pixel(Math.floor(worldCoordinate.x * Math.pow(2, this.getZoom() - 18)), 48 Math.floor(worldCoordinate.y * Math.pow(2, this.getZoom() - 18))); 49 var pixelCoordStr = "<br />像素坐标：" + pixelCoordinate.x + ", " + pixelCoordinate.y; 50 var tileCoordinate = new BMap.Pixel(Math.floor(pixelCoordinate.x / 256), 51 Math.floor(pixelCoordinate.y / 256)); 52 var tileCoordStr = "<br />图块坐标：" + tileCoordinate.x + ", " + tileCoordinate.y; 53 var viewportCoordinate = mp.pointToPixel(pos); 54 var viewportCoordStr = "<br />可视区域坐标：" + viewportCoordinate.x + ", " + viewportCoordinate.y; 55 56 var overlayCoordinate = mp.pointToOverlayPixel(pos); 57 var overlayCoordStr = "<br />覆盖物坐标：" + overlayCoordinate.x + ", " + overlayCoordinate.y; 58 59 info.setContent(lngLatStr + worldCoordStr + pixelCoordStr + tileCoordStr + 60 viewportCoordStr + overlayCoordStr); 61 mp.openInfoWindow(info, pos); 62 }); 63 </script> 64 65 </html>
浏览器运行，然后鼠标点击地图上某一位置后，弹框如下：
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/67137.html
