Location Information of Baidu map api application tagging (js Version)

Sometimes some things are not recorded, but some time later, will forget. You need to read it again.

Baidu map javascript api can refer to http://developer.baidu.com/map/reference/
Example: http://developer.baidu.com/map/jsdemo.htm

More About Baidu map http://www.cnblogs.com/milkmap/tag/%E5%9C%B0%E5%9B%BEAPI/
This section describes in detail.

I got a Baidu map to mark the geographical location information and obtained the address through Baidu api. This map api is for javascript

Add the display div Control

Copy codeThe Code is as follows: <div>
<P> Search:
<Input id = "txtarea" type = "text" size = "50"/> <input id = "areaSearch"
Type = "button" value = "Search" style = "cursor: pointer"/>
</P>
<P> latitude: <input name = "txtlatitude" type = "text" id = "txtlatitude" style = "width: 200px;"/>
Longitude: <input name = "txtlong.pdf" type = "text" id = "txtlong.pdf" style = "width: 200px;"/>
Region of the annotation point: <input name = "txtAreaCode" type = "text" id = "txtAreaCode" style = "width: 200px;"/>
</P>
</Div>
<Div style = "width: 420px; height: 340px; border: 1px solid gray; float: left;" id = "container">
</Div>
<Div style = "width: 350px; height: 340px;" id = "Div1">
<Div>
<Div class = "sel_container">
<Strong id = "curCity"> Beijing </strong> [<a id = "curCityText" href = "javascript: void (0) "> change city </a>] </div>
<Div class = "map_popup" id = "cityList" style = "display: none;">
<Div class = "popup_main">
<Div class = "title">
City list </div>
<Div class = "cityList" id = "citylist_container">
</Div>
<Button id = "popup_close">
</Button>
</Div>
</Div>
</Div>
</Div>

ReferenceCopy codeThe Code is as follows: <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.6.3.min.js"> </script> // jquery Library
<Script type = "text/javascript" src = "http://api.map.baidu.com/api? V = 1.2 "> </script> // Baidu Map File
<Script type = "text/javascript" src = "http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"> </script> //

Add codeCopy codeThe Code is as follows: <script type = "text/javascript">
Var map = new BMap. Map ("container ");
Map. centerAndZoom (new BMap. Point (117.10, 40.13), 11 );
Map. addControl (new BMap. NavigationControl ());
Map. addControl (new BMap. ScaleControl ());
Map. addControl (new BMap. OverviewMapControl ());
Map. addControl (new BMap. MapTypeControl ());
// Search
Document. getElementById ("areaSearch"). onclick = function (){
// Create an address parser instance
Var myGeo = new BMap. Geocoder ();
Var searchTxt = document. getElementById ("txtarea"). value;
// Display the address resolution result on the map and adjust the map field of view
MyGeo. getPoint (searchTxt, function (point ){
If (point ){
Map. centerAndZoom (point, 16 );
Document. getElementById ("txtlatitude"). value = point. lat;
Document. getElementById ("txtlong.pdf"). value = point. lng;
Var pointMarker = new BMap. Point (point. lng, point. lat );
GeocodeSearch (pointMarker );

Map. addOverlay (new BMap. Marker (point ));
}
Else
Alert ("no results found ");
}, "Nationwide ");
}
Map. enableScrollWheelZoom ();
// Create a CityList object and place it in the citylist_container Node
Var myCl = new BMapLib. CityList ({container: "citylist_container", map: map });
// Add operations when you click a city
MyCl. addEventListener ("cityclick", function (e ){
// Modify the current city display
Document. getElementById ("curCity"). innerHTML = e. name;
// Click to hide the city list
Document. getElementById ("cityList"). style. display = "none ";
});
// Add and click the "Change City" Link
Document. getElementById ("curCityText"). onclick = function (){
Var cl = document. getElementById ("cityList ");
If (cl. style. display = "none "){
Cl. style. display = "";
} Else {
Cl. style. display = "none ";
}
};
// Add and click the close button on the city list
Document. getElementById ("popup_close"). onclick = function (){
Var cl = document. getElementById ("cityList ");
If (cl. style. display = "none "){
Cl. style. display = "";
} Else {
Cl. style. display = "none ";
}
};

Map. addEventListener ("click", function (e ){
Document. getElementById ("txtlatitude"). value = e. point. lat;
Document. getElementById ("txtlong.pdf"). value = e. point. lng;
Map. clearOverlays ();
Var pointMarker = new BMap. Point (e. point. lng, e. point. lat); // create the coordinates of the annotation.
AddMarker (pointMarker );
GeocodeSearch (pointMarker );
});

Function addMarker (point ){
Var myIcon = new BMap. Icon ("mk_icon.png", new BMap. Size (21, 25 ),
{Offset: new BMap. Size (21, 21 ),
ImageOffset: new BMap. Size (0,-21)
});
Var marker = new BMap. Marker (point, {icon: myIcon });
Map. addOverlay (marker );
}
Function geocodeSearch (pt ){
Var myGeo = new BMap. Geocoder ();
MyGeo. getLocation (pt, function (rs ){
Var addComp = rs. addressComponents;
Document. getElementById ("txtAreaCode"). value = addComp. province + "," + addComp. city + "," + addComp. district;
});
}
</Script>

Source code for this annotation: Baidu map annotation source code