JavaScript calls Baidu maps, as well as the city's initialization

The map is very simple to build, and the official API documentation is clearly written, and I'll just summarize:

first, the introduction of JS: This is easy to understand, since it is called the JS version of the Baidu map, it must be quoted outside the JS file, and this file from the server Baidu (so must be networked, otherwise there is no chance.) ), all of the methods we use later are written in this JS file.

<script type=" Text/javascript "src=" http://api.map.baidu.com/api?v=1.4 "></SCRIPT> 

 

Here the 1.4 is the version number of the JS version of Baidu Map, the latest version is 1.4. (in theory, this statement can be placed anywhere in the HTML file, but it's usually before the

two, create a new <div> container in your HTML file : Add an id attribute (here <div id=" Container "> </div>). This container is used to place Baidu map, the size of the map can be achieved by adjusting the style of the Div.

Third, a new Baidu map

<script type= "Text/javascript" > var map = new Bmap.map ("container"); Create a map instance; ("container") is the id attribute value of the new Div just created var point = new Bmap.point (116.404, 39.915); Create point coordinates; this point is made up of longitude and latitude, and points can be arbitrarily selected Map.centerandzoom (point, 15); Initialize the map, set the center point coordinates and map level//map.centerandzoom ("Hangzhou");//This statement can replace the above one, the system will automatically locate the city, the city name can be customized according to the user//Of course, if such a sub-write, There's no need to create a point. </script>

As long as these three steps, you can build a Baidu map Web application. Of course, you need to adjust the style and the like.

Below is a complete HTML file: (This example from Baidu website) carefully developed 5-year UI front-end framework!

<! DOCTYPE html><!--html5--> 
&NBSP; 
 The following code provides a latitude and longitude and a level for map initialization:  carefully developed 5 UI front-end framework! 
map.centerandzoom (New Bmap.point (116.404, 39.915), one); 
Longitude 116.404 degrees, latitude 39.915 degrees in the position of Tiananmen Square, of course, the more digits behind the latitude and longitude to accurately represent a point, level 11, now the browser will see this effect:
  
The Centerandzoom method starts the corresponding calculation after receiving a coordinate and a level, and then obtains the corresponding tile based on the result of the calculation, which is finally displayed in the browser. At this point, the map initialization is complete.
What if you don't know the latitude and longitude information of Beijing? The 1.2 version of the API has a more convenient feature: Map initialization by city name.
map.centerandzoom (' Beijing '); 
At this point the API will find its central location based on the city name you provide, and depending on the size of the container to determine the level, to ensure that the city center area can be displayed in the field of view, if we do not change the size of the container using the above method to initialize the map, you will get the same results as before, but if you change the You will get the following effect:
  
 We see the center has not changed but the level has changed because the container is smaller, this is to ensure that the center of the city in the field of view to display the central area. The advantage of initializing the map in this way is that you don't have to know the latitude and longitude, the level of these concepts can let the API start to display the map, the API is to minimize the developer's cost of use. Of course, there are two sides to everything (as if it were a political lesson), and this way of initializing is a problem: first, the initialization process is asynchronous, and you can't immediately get the map state after the Centerandzoom code (such as Center point, field of view, etc.), Instead, you need to listen to the map load event for subsequent operations, and second, the initialization process is slightly slower than the former because there is a network request to determine the map center and level after the request is returned.  develop a 5-year UI front-end framework! 
 For example, you can only get the center point of a map in the following ways: 
map.addeventlistener (' Load ', function () {alert (Map.getcenter (). LNG + ', ' + map.getcenter (). lat);}); Map.centerandzoom (' Shanghai '); 
The map class provides a IsLoaded method that lets you know whether the map is loaded or not, and we can see how the result of calling this method is in two different initialization modes:
map.centerandzoom (New Bmap.point (116.404, 39.915), one); alert (map.isloaded ()); True 
If you use the city name this way, you will find that the map has not been initialized after the Centerandzoom method is completed:
map.centerandzoom (' Shanghai '); alert (map.isloaded ()); False 
JavaScript calls Baidu maps, as well as the city's initialization