Baidu map application 1. Query latitude and longitude according to address

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 to the page, and a query button. 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 the form 
 
 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, display the results in a text box 
 Map.centerandzoom (poi.point); 
 }); 
 Localsearch.search (keyword); 
} 
 
 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_"). V    Alue;        Localsearch.setsearchcompletecallback (function (SearchResult) {var poi = searchresult.getpoi (0);        document.getElementById ("Result_"). Value = Poi.point.lng + "," + Poi.point.lat;        Map.centerandzoom (Poi.point, 13);  var marker = new Bmap.marker (new Bmap.point (POI.POINT.LNG, Poi.point.lat));    Create annotations for the latitude and longitude Map.addoverlay (marker) corresponding to the address to be queried;    }); 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, the code is modified: 

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

Map.addoverlay (marker); var content = document.getElementById ("Text_"). Value + "<br/><br/> Longitude:" + poi.point.lng + "<br/> Latitude:" + P Oi.point.lat; var Infowindow = new Bmap.infowindow ("<p style= ' font-size:14px; ' > "+ content +" </p> "); Marker.addeventlistener ("click", Function () {This.openinfowindow (Infowindow);}); //

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

 Baidu Map Application 1. Query latitude and longitude by address