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

Source: Internet
Author: User
Tags jquery library

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.