How to use Baidu Map API

Full text: http://www.cnblogs.com/xuhongfei/archive/2013/04/10/3011964.html

Reference Baidu Map API file

When you reference a map API file, you need to use the API key you requested.

1. <script type= "Text/javascript" src= "http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v =1.0&services=false "></script>

<script type= "Text/javascript" src= "http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v= 1.0&services=false "></script>

Create a map container element

1. <div style= "width:520px;height:340px;border:1px solid #000" id= "container" ></div>

<div style= "width:520px;height:340px;border:1px solid #000" id= "container" ></div>

The map requires an HTML element as a container so that it can be displayed on the page. Here we create a DIV element and make it size. The map adjusts its size according to the container size.

Name space

The API uses BMap as the namespace, and all classes are under the namespace, such as: Bmap.map, Bmap.control, Bmap.overlay.

Create a Map instance

1. var map = new Bmap.map ("container");

var map = new Bmap.map ("container");

The map class, located under the Bmap namespace, represents maps, and a map instance can be created with the new operator. Its parameters can be an element ID or an element object.
Note You should make sure that the container element is added to the map when you call this constructor.

Create point coordinates

1. var point = new Bmap.point (116.404, 39.915);

var point = new Bmap.point (116.404, 39.915);

Here we use the Point class under the Bmap namespace to create a coordinate dot. The point class describes a geographic coordinates, where 116.404 represents longitude and 39.915 represents latitude.

Map initialization

1. Map.centerandzoom (point,15);

Map.centerandzoom (point,15);

After creating the map instance, we need to initialize it, and the BMap.Map.centerAndZoom () method requires that you set the center point coordinates and the map level.
The map must be initialized before other operations can be performed.

Map operation

Once the map is instantiated and initialized, it can interact with it. The appearance and behavior of the map objects in the API are very similar to the maps that interact on the Baidu map site. It supports interactive functions such as mouse dragging, wheel zooming, double-clicking and zooming. You can also modify the configuration to change these features.

You can also interact with the map programmatically. The map class provides several ways to modify the state of a map. For example: SetCenter (), panto (), Zoomto (), and so on.

The following example shows a map that waits two seconds before it moves to the new center point. The panto () method will let the map move smoothly to the new center point, and if the move distance exceeds the current map area size, the map jumps straight to that point.

1. var map = new Bmap.map ("container");

2. var point = new Bmap.point (116.404, 39.915);

3. Map.centerandzoom (point, 15);

4. Window.settimeout (function () {

5. Map.panto (New Bmap.point (116.409, 39.918));

6.}, 2000);

var map = new Bmap.map ("container");

var point = new Bmap.point (116.404, 39.915);

Map.centerandzoom (Point, 15);

Window.settimeout (function () {

Map.panto (New Bmap.point (116.409, 39.918));

}, 2000);

How to use Baidu Map API