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