Baidu Map API Application Annotated location information (JS version) _javascript skills

Sometimes some things do not record, and after some time to see, there will be forgotten. Need to be seen again.

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

More Baidu Map Introduction http://www.cnblogs.com/milkmap/tag/%E5%9C%B0%E5%9B%BEAPI/
It is very detailed in the introduction.

Got a Baidu map to mark the location of information, through the Baidu API to get the address. This map API is a JavaScript version

Add a div control to display display

Copy Code code as follows:

<div>
<p> Search:
<input id= "Txtarea" type= "text" size= "M"/> <input "id="
Type= "button" value= "Search" style= "Cursor:pointer"/>
</p>
<p> Latitude: <input name= "Txtlatitude" type= "text" id= "Txtlatitude" style= "width:200px;"/>
Longitude: <input name= "Txtlongitude" type= "text" id= "Txtlongitude" style= "width:200px;"/>
Callout Point area: <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)" > Replace 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>

In reference reference

Copy Code code 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 files
<script type= "Text/javascript" src= "Http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js" > </script>/City Selected

Add code

Copy Code code 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 () {
Creating an Address resolver instance
var Mygeo = new Bmap.geocoder ();
var searchtxt = document.getElementById ("Txtarea"). Value;
Display address resolution results on a map and adjust the map view
Mygeo.getpoint (Searchtxt, function (point) {
if (point) {
Map.centerandzoom (Point, 16);
document.getElementById ("Txtlatitude"). Value = Point.lat;
document.getElementById ("Txtlongitude"). Value = POINT.LNG;
var pointmarker = new Bmap.point (POINT.LNG, Point.lat);
Geocodesearch (Pointmarker);

Map.addoverlay (New Bmap.marker (point));
}
Else
Alert ("Search results not Found");
}, "national");
}
Map.enablescrollwheelzoom ();
Create the CityList object and place it in the Citylist_container node
var mycl = new Bmaplib.citylist ({container: "Citylist_container", Map:map});
Add related actions when clicking on the city
Mycl.addeventlistener ("Cityclick", function (e) {
Modify the current city display
document.getElementById ("Curcity"). InnerHTML = E.name;
Hidden City list after clicking
document.getElementById ("CityList"). Style.display = "None";
});
Add a click action to the "Replace 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 a click action to 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 ("Txtlongitude"). Value = E.POINT.LNG;
Map.clearoverlays ();
var pointmarker = new Bmap.point (E.POINT.LNG, E.point.lat); Create the coordinates of the callout
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>

Effect chart

This annotated source code: Baidu Map Annotation Source code