Baidu Map API Development Series (1): Preface

Baidu Map API At present in the field of Map API more and more attention by many developers, many applications are used to the Baidu Map API services, including Bo master me, I used to do is the JavaScript API, based on experience, I want to sort out a series of tutorials, If you can use Baidu Map API developers to bring a little help, it is very good, but also hope that we can communicate with each other and learn together.

Written in front of the words: if you really want to know more about the map of the JSAPI, first some basic GIS concept is necessary, GIS is a geographic information system, probably a lot of program apes have not heard, simply said, GIS is through the computer software technology to visual management of geographic information, A map is one of the most important geographic information applications. GIS-based concepts related to maps include projections, coordinate systems, coordinate transformations, tile plots, and vector plots. Do not faint, more complex still in the back.

Now many network maps are using Web Mercator as the main projection method, including Google Map and Baidu map, the specific projection principle and method here is not the brain complement. Baidu Encyclopedia is explained very clearly. If you want to know the details, you can dig deeper. The purpose of the projection is to tell the shape of the spherical surface to form a map on a flat display, and the map after the projection has its own coordinate system. For example, many people know the latitude and longitude coordinate system to describe a position on the earth. and Baidu Map API involved in the coordinate system is not only the latitude and longitude coordinate system.

You need to know the following coordinate system:

• Latitude: Describes a point by longitude latitude. such as Bmap.point (116.404, 39.915). Note: The latitude and longitude obtained by the general GPS device belongs to the WGS84 coordinate system. The latitude and longitude coordinates used by the domestic map manufacturers are not WGS84 latitude and longitude coordinates, all are after the GC02 encryption. and Baidu Map in GC02 encryption on the basis of another bd09 encryption. So the latitude and longitude obtained by using the original GPS directly on the Baidu map for the dot will be offset. Using the original GPS latitude and longitude coordinates on the map, you need to first call the Baidu map Geoconv API to coordinate the original coordinates transformation. Portal: Coordinate conversion API.
• plane coordinates: The shape of the spherical surface is transformed by a projection Narihira the shape on the plane, in the plane, a planar coordinate system is needed to describe a position, and the Baidu Map API uses the Mercator projection by default. After the projection there is a planar coordinate system. In the Baidu Map API, planar coordinates are imagined to be unfolded in a plane, the coordinates of the origin and latitude and longitude of the origin of the same, the equator and 0 degrees longitude intersection position. Baidu Map API divides the map into 18 levels, with the plane coordinates at the highest level of 18, which means that at level 18, a unit of planar coordinates represents 1 pixels on the screen. The plane coordinates are not related to the level shown by the map, that is to say, at level 1 and 18, the plane coordinates of the Tiananmen Square are consistent. So how do you know the plane coordinates of a location? This can be done through the Bmap.mercatorprojection class, which provides a way to convert between latitude and longitude and plane coordinates. For example, the latitude and longitude of Tiananmen Square is about 116.404, 39.915, the plane coordinates can be obtained by conversion:

  1 var projection =new  bmap.mercatorprojection (); 2 var point = Projection.lnglattopoint (new bmap.point (116.404, 39.915)); 3 alert (point.x + "," + point.y);

  The final result is: 12958175,4825923.77.

• Pixel coordinates: The pixel coordinates represent the display coordinates at a certain zoom level, at level 18, pixel coordinates can be rounded down by rounding the plane coordinates, and the pixel coordinates are integer values. Because it represents the pixel value on the screen. At other levels, we can get pixel coordinates using the following formula.
  Pixel coordinate = Math.floor (planar coordinate * 2zoom-18)
• 
            tile coordinates = pixel coordinates/256
  
  or at the base of the pixel coordinate origin (equal to the plane coordinate origin), calculate the pixel coordinate value first, and then calculate the coordinates of the tile where the point resides. Note that at different zoom levels, the coordinates of the tile with the same point are not the same.
• Visual coordinates: This is something that you will often use, which is relative to the coordinates of your map container, the map container is the DOM element that was passed in when the map was initialized, the origin is the upper-left corner of the DOM element, and in the actual development process, You can use the Pointtopixel and Pixeltopoint methods of the map class in the API to convert latitude and longitude and visual area coordinates to each other.
• Overlay coordinates: This coordinate is relatively less used, and the overlay is implemented as a number of DOM elements that are placed in a number of overlay containers, so the coordinates of the overlay are actually relative to the coordinates of the covering container. After the map is initialized, the upper-left corner of the overlay container is the same as the upper-left corner of the visible area of the map, and once the map has been moved and scaled, the overlay container position changes. The API provides latitude and longitude information when customizing the overlay, and the developer needs to convert the latitude and longitude to the pixel coordinates of the overlay so that the overlay can be displayed in the correct position. You can use the Pointtooverlaypixel and overlaypixeltopoint of the map class in the API for two methods.

These coordinate systems, which are sure to be used frequently in the development of map APIs, may sometimes be confusing if they are not well understood, even in the case of some functional development. If you understand the underlying concepts in depth, you can skillfully use some of the methods provided by the API in the development of the map API.

With all that said, here's a code example to review the concept:

1<! DOCTYPE html>23 45<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>6<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no"/>7<title>map coordinate</title>8<style type= "Text/css" >9     /*<! [Cdata[*/Ten  One HTML { Aheight:100%; -     } - Body { theheight:100%; - margin:0px; - padding:0px; -     } + #map_container { -height:100%; +     } A     /*]]>*/ at</style> -  - -  -<body> -<div id= "Map_container" ></div> in</body> -<script type= "Text/javascript" src= "Http://api.map.baidu.com/api?v=2.0&ak=wWy2A8K94nhntYTYUHS19RXW" > </script> to<script type= "Text/javascript" > + varMP =NewBmap.map (' Map_container ', { -Enablehighresolution:true the }); *Mp.centerandzoom (' Beijing ', 15); $ mp.enablescrollwheelzoom ();Panax Notoginseng  - varTile_size = 256; the  +Mp.addeventlistener (' click ',function(e) { A     varinfo =NewBmap.infowindow (' '); the     varpos =E.point; +     varProjection = This. Getmaptype (). getprojection (); -     varLnglatstr = "Latitude and Longitude:" + pos.lng + "," +Pos.lat; $     varWorldcoordinate =Projection.lnglattopoint (POS); $     varWorldcoordstr = "<br/> Plane Coordinates:" + worldcoordinate.x + "," +worldcoordinate.y; -     varPixelcoordinate =NewBmap.pixel (Math.floor (worldcoordinate.x * MATH.POW (2), This. Getzoom ()-18)), -Math.floor (WORLDCOORDINATE.Y * MATH.POW (2, This. Getzoom ()-18))); the     varPixelcoordstr = "<br/> Pixel coordinates:" + pixelcoordinate.x + "," +pixelcoordinate.y; -     varTilecoordinate =NewBmap.pixel (Math.floor (pixelcoordinate.x/256),WuyiMath.floor (pixelcoordinate.y/256)); the     varTilecoordstr = "<br/> Tile Coordinates:" + tilecoordinate.x + "," +tilecoordinate.y; -     varViewportcoordinate =Mp.pointtopixel (POS); Wu     varViewportcoordstr = "<br/> Visual Area coordinates:" + viewportcoordinate.x + "," +viewportcoordinate.y; -  About     varOverlaycoordinate =Mp.pointtooverlaypixel (POS); $     varOverlaycoordstr = "<br/> Overlay Coordinates:" + overlaycoordinate.x + "," +overlaycoordinate.y; -  -Info.setcontent (lnglatstr + worldcoordstr + pixelcoordstr + tilecoordstr + -Viewportcoordstr +overlaycoordstr); A Mp.openinfowindow (info, POS); + }); the</script> -  $

After the browser runs and then clicks on a location on the map, the box is as follows:

Conclusion: In the use of Baidu Map API development process, the concept of coordinate system is very important, because it involves the display on the map, and many times the developers get coordinates are longitude coordinates, or even GPS coordinates, these coordinate data to the Baidu map to mark the correct location, Be sure to remember the conversion according to the concept of the above coordinate system. Otherwise the result is not accurate. OK, follow up, I will be issued on how to use the Map API development, introduction Baidu Map API Some JS principle series of articles.

Baidu Map API Development Series (1): Preface