Javascript calls Baidu map, city initialization, and javascript calls

Javascript calls Baidu map, city initialization, and javascript calls

The construction of a map is very simple, and the official API documentation is also clearly written. I only make a summary:

1. Introduce JS: This is easy to understand. Since Baidu map of JS version is called, it must reference external JS files, and this file comes from Baidu's server (so it must be connected to the Internet, otherwise there will be no drama ..), All the methods we will use will be written in this JS file.

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

 

Here1.4It is the version number of Baidu map for JS version. The latest version is 1.4. (In theory, this statement can be placed anywhere in an html file, but it is usually placed before the

2. Create a New <div> container in your html file: Add an id attribute (<div id = "container"> </div> ). This container is used to place Baidu maps. The map size can be achieved by adjusting the div style.

3. Create a Baidu Map

<Script type = "text/javascript"> var map = new BMap. map ("container"); // create a Map instance; ("container") is the id attribute value var point = new BMap of the newly created div. point (116.404, 39.915); // create the coordinate of a Point. The Point consists of the longitude and latitude. You can select a map as needed. centerAndZoom (point, 15); // initialize the map and set the coordinates of the center and map level. // map. centerAndZoom ("Hangzhou"); // This statement can replace the preceding one, and the system will automatically locate the city. The city name can be set as needed. // Of course, if you write this statement, you do not need to create a new point. </script>

 

In these three steps, you can create a Baidu map web application. Of course, you also need to adjust the style and so on.

The following is a complete HTML file: (this example is from the Baidu official website) carefully developed a five-year UI front-end framework!

<! DOCTYPE html> <! -- HTML5 --> 
 
To display a map in a container, you also need to provide the API with two things: geographical location and display level. The geographic location is to tell the API where the map is displayed, in Beijing or Shanghai? Or in Guangzhou? The geographical location is described by longitude and latitude, as is Baidu map. The display level tells the API how much map is displayed. I have been to the junior high school geography class. A map has a scale, and the scale usually tells the map that 1 cm represents the actual number of kilometers. This is also true for the map API, but it uses pixels as the benchmark. at different levels, each pixel represents a different number of meters. The higher the level, the less the number of meters equals to each pixel, otherwise, the larger the value is. Visually, the higher the level, the more detailed the map. Currently, Baidu map supports the range of 1 to 19. Under the range of 19, a pixel on the map represents 0.5 meters (Note: currently, version 1.2 supports the range of 19 levels, 1.1 and earlier versions support up to 18 levels ).
The following code provides a longitude and latitude level for map initialization: a 5-year UI front-end framework is developed carefully!
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
 
The longitude of the east longitude is 116.404 degrees, and the latitude of the North is about the Tiananmen Square. Of course, the more digits behind the latitude and longitude are, the more precise the point is. The level is 11. Now we can see this effect in the browser:

After centerAndZoom receives a coordinate and a level, it starts to calculate accordingly. Then, it obtains the corresponding graph block based on the calculation result and displays it in the browser. At this point, the map Initialization is complete.
What if you do not know the longitude and latitude information of Beijing? API 1.2 provides a more convenient function: Map initialization by city name.
Map. centerAndZoom ('beijing ');
 
In this case, the API searches for the Center Location Based on the city name you provide, and determines the level based on the container size to ensure that the city center area is displayed in the field of view, if we do not change the container size and use the above method to initialize the map, you will get the same result as before, but if you change the container width to 300x200, the following results will be obtained:

We can see that the center has not changed but the level has changed, because the container has become smaller, to ensure that the Beijing Central region can be displayed within the field of view. The advantage of initializing a map in this way is that you do not have to know the longitude, latitude, and level to enable the API to start displaying the map. This operation also minimizes developers' usage costs. Of course, everything has two sides (like political course content). There are two problems with initialization in this way: first, the initialization process is asynchronous, you cannot get the MAP status (such as the central point and the field of view) immediately after the centerAndZoom code. Instead, you need to listen to the map load event for subsequent operations. Second, the initialization process is a little slower than the former, because there is a network request, the request is returned before determining the map center and level. Well-developed 5-year UI front-end framework!
For example, you can only obtain the map center using the following methods:
Map. addEventListener ('load', function () {alert (map. getCenter (). lng + ',' + map. getCenter (). lat) ;}); map. centerAndZoom ('shanghai ');
 
The Map class provides the isLoaded method, through which you can know whether the Map is loaded. Let's look at the results of calling this method in two different initialization methods:
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);alert(map.isLoaded()); // true
 
If you use the city name method, you will find that the map is not initialized after the centerAndZoom method is executed:
Map. centerAndZoom ('shanghai'); alert (map. isLoaded (); // false
 

Javascript problems, I want to call the Baidu map API to cyclically retrieve the distance between every two cities.
Baidu map API should have instructions

A javascript program similar to Baidu map
I did it some time ago. I wonder if it meets the requirements.

First define a page
<Html>
<Head>
<Title> my map </title>
<Link rel = 'stylesheet 'Type = 'text/css 'href =' <% = request. getContextPath () %>/css/map.css '/>
<Script type = 'text/javascript 'src = '<% = request. getContextPath () %>/js/prototype. js'> </script>
<Script type = "text/javascript">
ContextPath = '<% = request. getContextPath () %> ';
</Script>
<Script type = 'text/javascript 'src = '<% = request. getContextPath () %>/js/map. js'> </script>
</Head>
<Body onload = 'initmapobj () '>
<Table border = '0' cellspacing = '0' cellpadding = '0' id = 'maintable'>
<Tr>
<Td height = '000000' width = '000000' id = 'maintd '> </td>
<Td width = '20'> </td>
<Td height = '000000' width = '41' id = 'minaturetd '> </td>
</Tr>
</Table>
</Body>
</Html>

Prototype. js is downloaded by myself. I use version 1.4.

The script is saved as map. js, and its content is as follows:

// ================================= Initialize the page

// Load controls
Function InitMapObj (){
InitMainMap ();
InitMiniature ();
}

Var map = null;
// Initialize the master map
Function InitMainMap (){
Var obj = $ ('maintd ');
Var divobj = document. createElement ('div ');
Divobj.style.css Text = 'position: absolu ...... the remaining full Text>