first, Baidu map initialization and the addition of basic controls
1. Introduction of the Map package
The AK attribute of the map package URL is the key you requested on the open platform of the Baidu map.
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak=/* your key * *" ></script>
2. Initialize the map
var map = new Bmap.map ("Allmap"); Create a Map instance
map.centerandzoom ("Tianjin"); Initialize the map and set the city and map levels.
3. Adding Controls
Map Event Setup functions: Function
setmapevent () {
map.enabledragging ();//enable map drag-and-drop events, enabled by default (writable)
Map.enablescrollwheelzoom ()//enable map scroll wheel zoom
in and Zoom Out map.enabledoubleclickzoom ()//enable mouse double-click to zoom in, default enabled (can not write)
Map.enablekeyboard ()//enable keyboard up and down key move map
}
//Map control Add function: function
Addmapcontrol () {
//Add zoom control
to map var ctrl_nav = new Bmap.navigationcontrol ({anchor:bmap_anchor_top_left,type:bmap_navigation_control_large});
Map.addcontrol (Ctrl_nav);
Add a thumbnail control to the map
var ctrl_ove = new Bmap.overviewmapcontrol ({anchor:bmap_anchor_bottom_right,isopen:1});
Map.addcontrol (ctrl_ove);
Add a scale control to the map
var Ctrl_sca = new Bmap.scalecontrol ({anchor:bmap_anchor_bottom_left});
Map.addcontrol (CTRL_SCA);
}
Second, click the location and then convert to address by latitude
Listens for click event
map.addeventlistener ("click", Function (e) {
map.clearoverlays ();
Alert (e.point.lng + "," + E.point.lat);
Point = new Bmap.point (E.POINT.LNG, E.point.lat);
var GEOC = new Bmap.geocoder ();
Geoc.getlocation (Point,function (RS) {
var addcomp = rs.addresscomponents;
Alert (addcomp.province + "," + addcomp.city + "," + Addcomp.district + "," + Addcomp.street + "," + ADDCOMP.STREETNU mber);
Console.log (Addcomp);
});
var marker = new Bmap.marker (point);
Map.addoverlay (marker);
document.getElementById ("Allmap"). Value = e.point.lng+ "," + E.point.lat;
});
Three, the complete code is as follows
<! DOCTYPE html>