Address Resolution and browser positioning of Baidu map and addition of drag-and-drop labels

Here, the Baidu map demo includes the following common examples: Address Resolution, browser positioning, IP location, and drag-and-drop tagging.

<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"> <meta name = "viewport" content = "Initial-scale = 1.0, user-scalable = No "/> <SCRIPT type =" text/JavaScript "src =" http://api.map.baidu.com/api? V = 2.0 & aK = 4itf2ygdkkifshflqggs7dza "> </SCRIPT> <input type =" text "id =" Address "/> <input type =" button "value =" "onclick = "showmap (); "/> <Div id =" lnglat "style =" color: red; "> current coordinate: 0, 0 </div> <Div id =" allmap "style =" width: 400px; Height: 400px; overflow: hidden; margin: 0; "> </div> <SCRIPT type =" text/JavaScript ">/*** Baidu map API function */var map = new bmap. map ('allmap'); // create a map instance // <C: If test = '$ {empty awardinfo. baidumaplng} '> // map. centerandzoom ('harbin, 12); // </C: If> // <C: If test = '$ {not empty awardinfo. baidumaplng} '> // var point = new bmap. point ($ {awardinfo. baidumaplng}, $ {awardinfo. baidumaplat}); // map. centerandzoom (point, 18); // var marker = new bmap. marker (point); // map. addoverlay (Marker); // marker. enabledragging (); // marker. addeventlistener ('dragend', function (e) {// document. getelementbyid ('lnglat '). innerhtml = 'current coordinate: '+ E. point. LNG + "," + E. point. lat; //}); // </C: If> // The C tag in JSP is used above. It is suitable for reading the coordinates stored in the database, then, the location information is displayed in the map, and you can drag the label/var point = new bmap. point (116.404, 39.915); // create point coordinates // map. centerandzoom (point, 15); // initialize the map (set the Center Coordinate and map zoom level) map. centerandzoom ("Harbin City", 12); // initialize the map (set the city name and map zoom level) map. addcontrol (New bmap. navigationcontrol (); // Add the map of the pan zoom control. addcontrol (New bmap. scalecontrol (); // Add a scale control map. addcontrol (New bmap. overviewmapcontrol (); // Add a map control map. enablescrollwheelzoom (); // enables scroll wheel zoom in/out. // map. disabledragging (); // do not drag a map. // map. enabledragging (); // allow map dragging (permitted by default)/*** browser positioning (Status Code Description) * bmap_status_success: retrieval successful, corresponding value "0" * bmap_status_city_list: city list, corresponding to value "1" * bmap_status_unknown_location: unknown location result, corresponding value "2" * bmap_status_unknown_route: Unknown navigation result, corresponding value "3" * bmap_status_invalid_key: illegal key, corresponding value "4" * bmap_status_invalid_request: Illegal Request, corresponding value "5" * forbidden: no permission, corresponding value "6" (New from 1.1) * bmap_status_service_unavailable: Service unavailable, corresponding value "7" (added from 1.1) * bmap_status_timeout: timeout, corresponding value "8" (added from 1.1) */var geolocation = new bmap. geolocation (); geolocation. getcurrentposition (function (r) {console. log ('status code for browser positioning: '+ this. getstatus (); If (this. getstatus () = bmap_status_success) {var Mk = new bmap. marker (R. point); map. addoverlay (MK); map. panto (R. point); document. getelementbyid ('lnglat '). innerhtml = 'current coordinate: '+ R. point. LNG + "," + R. point. lat;} else {// switch (this. getstatus () {// case 6: document. getelementbyid ('lnglat '). innerhtml = 'request unauthorized, unable to provide location service'; break; // default: document. getelementbyid ('lnglat '). innerhtml = 'unable to get the current location, you can move the map to view '; break; //} new bmap. localcity (). get (function (result) {console. log ('IP location to get the current city: '+ result. name); map. setcenter (result. name) ;}},{ enablehighaccuracy: true});/*** map view */function showmap () {var address = document. getelementbyid ('address '). value; If (''= address) {document. getelementbyid ('lnglat '). innerhtml = 'Enter the address'; return;} // create an address parser instance var mygeo = new bmap. geocoder (); // display the address resolution result on the map, and adjust the map field of view mygeo. getpoint (address, function (point) {If (point) {map. centerandzoom (point, 16); map. clearoverlays (); // clear all the tags on the map (map. removeoverlay (Marker) can clear a single annotation) var marker = new bmap. marker (point); // creates a map annotation. addoverlay (Marker); // Add the annotation to the map marker. enabledragging (); // you can drag a label (not drag by default). // Baidu coordinates are longitude and latitude, that is, point (LNG, Lat) // The Order of Google coordinates is the opposite of that of Baidu. It is (Lat, LNG) // You can also obtain coordinates ------------------> marker. getposition (). LNG and marker. getposition (). lat; document. getelementbyid ('lnglat '). innerhtml = 'current coordinate: '+ point. LNG + "," + point. lat; // listen to the drag event of the label to obtain the coordinate marker after the label is dragged in real time. addeventlistener ('dragend', function (e) {document. getelementbyid ('lnglat '). innerhtml = 'current coordinate: '+ E. point. LNG + "," + E. point. lat;}) ;}}, 'harbin ') ;}</SCRIPT>