Baidu Map API Example Tutorial

These days more free, on contact with the next Baidu Map API (Developer Center link Address: http://developer.baidu.com), found that the call is very convenient. Just a few simple steps to register, you can get a key, you can directly call (PS: It seems like the 1.3 version without registering to get key, you can call the API directly).
It's nice to think that you can combine it with your own project. Looked at several articles in the garden, feel very good, want to try their own hands.
In the call Baidu Map API, the latitude of the acquisition is bound to be the key, then how to obtain the latitude and longitude value. This is one of the most important issues to solve. Through the query data, read a few examples, learned the method of the call.
Gossip is not much, the following will be directly introduced to you, specifically how to call Baidu Map API.

First create a new HTML page. Then refer to the API:

 

Here I directly quoted the version of 1.3, to refer to the 1.3 version of the words to add key:

<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.5&ak= Your Keys" ></script>
 
Such a few lines of code successfully quoted Baidu map API. The next step is to invoke some of his methods:

First, add a div to the body to load the map, and simply write down the style.

<div id= "container" 
    style= "Position:absolute;
        margin-top:30px; 
        width:730px; 
        height:590px; 
        top:50; 
        border:1px solid gray;
        Overflow:hidden; " >
</div>
Then write the JavaScript code to invoke the methods in the API. First create a map, and then set the map to display the center map, and display the magnification:

<script type= "Text/javascript" >
    var map = new Bmap.map ("container");
    Map.centerandzoom ("Ningbo",;</script>)
 
Then, the way to start the map is reduced, as well as the drag and drop function of the map:

Map.enablescrollwheelzoom ();    Enable the scroll wheel to zoom out, disable
map.enablecontinuouszoom () by default;    Enable map inertia drag, disabled by default
 
To make it easier to use the map, we can also add the pan control on the zoom, as well as the thumbnail control of the map, and set the location he wants to display:

Map.addcontrol (New Bmap.navigationcontrol ());  Add the default zoom translation control
Map.addcontrol (New Bmap.overviewmapcontrol ());//Add default thumbnail map control
Map.addcontrol (new Bmap.overviewmapcontrol ({isopen:true, anchor:bmap_anchor_bottom_right}));   Lower right corner, open
 
"Bmap_anchor_bottom_right" is where the control is displayed, indicating that the control is located in the lower-right corner of the map and can add parameter values as you like.

There are four main types:
Bmap_anchor_top_left indicates that the control is positioned in the upper-left corner of the map.
Bmap_anchor_top_right indicates that the control is positioned in the upper-right corner of the map.
Bmap_anchor_bottom_left indicates that the control is positioned in the lower-left corner of the map.
Bmap_anchor_bottom_right indicates that the control is positioned in the lower-right corner of the map.

Well, some of the basic settings of the map have been added, if you want to other functions, you can also go through the Baidu Map API to see the demo to get the method of call (http://developer.baidu.com/map/jsdemo.htm).

 The next step is to implement our main function. 
 First, add two text boxes and a query button to the page first. The first text box is used to enter the address to be queried, and the second text box is used to display the latitude and longitude of the query. The HTML code is all written.   

 
The next step is to build a query:

var localsearch = new Bmap.localsearch (map);
Localsearch.enableautoviewport (); Allow automatic resizing of forms
 
Then we can start to do the most critical step is to get the exact latitude and longitude of the address:

function Searchbystationname () {
var keyword = document.getElementById ("Text_"). Value;
Localsearch.setsearchcompletecallback (function (SearchResult) {
var poi = searchresult.getpoi (0);
document.getElementById ("Result_"). Value = Poi.point.lng + "," + Poi.point.lat; Get longitude and latitude to display the results in a text box
Map.centerandzoom (Poi.point, 13);
});
Localsearch.search (keyword);
}



In order to make the effect more obvious, we can also add a callout point to the address we want to query. Therefore, the above code can be further changed to:

function Searchbystationname () {
    map.clearoverlays ();//Clear the original label
    var keyword = document.getElementById ("Text_ "). Value;
    Localsearch.setsearchcompletecallback (function (searchresult) {
        var poi = searchresult.getpoi (0);
        document.getElementById ("Result_"). Value = Poi.point.lng + "," + Poi.point.lat;
        Map.centerandzoom (Poi.point,);
        var marker = new Bmap.marker (new Bmap.point (POI.POINT.LNG, Poi.point.lat));  Create annotations for the latitude and longitude of the address to be queried
        map.addoverlay (marker);
    });
    Localsearch.search (keyword);



We can also add detailed information to the label so that you can see the details when you click on it. So, once again, modify the code:

function Searchbystationname () {
    map.clearoverlays ();//Clear the original label
    var keyword = document.getElementById ("Text_ "). Value;
    Localsearch.setsearchcompletecallback (function (searchresult) {
        var poi = searchresult.getpoi (0);
        document.getElementById ("Result_"). Value = Poi.point.lng + "," + Poi.point.lat;
        Map.centerandzoom (Poi.point,);
        var marker = new Bmap.marker (new Bmap.point (POI.POINT.LNG, Poi.point.lat));  Create a callout that corresponds to the latitude and longitude of the address you want to query
 
 

OK, the basic functions are realized, the following will provide you with the complete code bar.