Simple Baidu Map Click to get the current geographical coordinates

In many cases we need to click on a map and then get the longitude and latitude values for the current location, the code is as follows:

<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"/><title> Baidu Map API location search-get latitude and longitude demo</title> <meta name="Description"Content="Baidu Map Location search and mouse click Place to get latitude and longitude, these are the map is more basic and useful code, which also includes the map based on User IP display, change the mouse style on the map, enable wheel zoom"/> <meta name="keywords"Content="Baidu Map, location search, get latitude and longitude, change the map mouse style, enable wheel zoom"/> <script type="Text/javascript"Src="http://api.map.baidu.com/api?v=1.2"></script>""Method="Get"> <label > Location:</label> <input id="where"Name="where"Type="text"> <input type="Button"Value="find on the map"onclick="Sear (document.getElementById (' where '). value);"/> <div style="width:520px;height:340px;border:1px Solid Gray"Id="Container"></div>latitude and Longitude:<input id="Lonlat"Name="Lonlat"Type="text"></form><script type="Text/javascript">//Create a map instance within the specified containervarMap =NewBmap.map ("Container"); Map.setdefaultcursor ("crosshair");//set the default mouse pointer style for a mapMap.enablescrollwheelzoom ();//enable the scroll wheel to zoom out, disabled by default. //Create point coordinatesvarPoint =NewBmap.point (120.386266,30.307407);//initialize map, set center point coordinates and map levelMap.centerandzoom (Point, -);//panto () method waits two seconds-lets the map move smoothly to the new center point/**window.settimeout (function () {Map.panto (new Bmap.point (120.386266, 30.307407));*///*********************** Address Resolution classvarGC =NewBmap.geocoder ();//to add a--------------------------------------control to a map/** The controls provided in the Map API are: control: The abstract base class for controls, all of which inherit methods and properties of this class. This class enables you to implement a custom control. Navigationcontrol: The map Pan zoom control, which is located at the top left of the map by default, contains the ability to control the panning and zooming of the map. Overviewmapcontrol: The thumbnail map control, which is located at the bottom right of the map by default, is a collapsible thumbnail map. Scalecontrol: A scale control that, by default, is located at the bottom left of the map, showing the map's scale relationship. Maptypecontrol: The map type control, which is located at the top right of the map by default. Copyrightcontrol: Copyright control, which is located at the bottom left of the map by default. **///navigationcontrol Map Pan Zoom control, which, by default, is located at the top left of the map and contains the ability to control the panning and zooming of the map. Map.addcontrol (NewBmap.navigationcontrol ()); //overviewmapcontrol thumbnail map control, which is located at the bottom right of the map by default, is a collapsible thumbnail mapMap.addcontrol (NewBmap.overviewmapcontrol ());//Scalecontrol: A scale control that, by default, is located at the bottom left of the map, showing the map's scale relationship. Map.addcontrol (NewBmap.scalecontrol ());//Maptypecontrol: The map type control, which is located at the top right of the map by default. Map.addcontrol (NewBmap.maptypecontrol ());//Copyrightcontrol: Copyright control, default at the bottom left of the mapMap.addcontrol (NewBmap.copyrightcontrol ());//----------------------------------------------Map Overlay/** The Map API provides the following overlays: Overlay: An abstract base class for overlays, all of which inherit this class of methods. Marker: The callout represents a point on the map, and you can customize the icon for the callout. Label: Represents a text callout on a map, and you can customize the text content of the callout. Polyline: Represents a polyline on a map. Polygon: Represents a polygon on a map. Polygons are similar to closed polylines, and you can also add fill colors to them. Circle: Represents a circle on a map. Infowindow: Information window is also a special covering, it can display more rich text and multimedia information. Note: Only one information window can be opened on the map at the same time. You can use the Map.addoverlay method to add overlays to the map, remove the overlay using the Map.removeoverlay method, and note that this method does not apply to Infowindow. **///Create a calloutvarMarker =NewBmap.marker (point); //add a callout to a mapMap.addoverlay (marker);//******************************************** Monitor Callout Events//Click eventsMarker.addeventlistener ("Click", Function (e) {document.getElementById ("Lonlat"). Value = E.point.lng +", "+E.point.lat;}); //******************************************* of the label to be dragged//the marker enabledragging and disabledragging methods can be used to toggle the drag function of the callout. marker.enabledragging ();//Monitor the callout's Dragend event to capture the latest position of a dragged calloutMarker.addeventlistener ("Dragend", Function (e) {gc.getlocation (E.point, function (RS) {Showlocationinfo (e.point, RS);  }); });//***************************** Information window//Show address Information windowfunction Showlocationinfo (PT, RS) {varopts ={width: -,//Information window widthHeight Max,//Information window HeightTitle:"Current Position"  //Information window Title    }          varAddcomp =rs.addresscomponents; varAddr ="Current Position:"+ Addcomp.province +", "+ addcomp.city +", "+ Addcomp.district +", "+ Addcomp.street +", "+ Addcomp.streetnumber +"<br/>"; Addr+="Latitude:"+ Pt.lat +", "+"Longitude:"+pt.lng; varInfowindow =NewBmap.infowindow (addr, opts);//Create an Information window objectMarker.openinfowindow (Infowindow); } map.addeventlistener ("Click", function (e) {//Map Click eventdocument.getElementById ("Lonlat"). Value = E.point.lng +", "+E.point.lat;});//**************************** current Baidu map provides layers including://trafficlayer: Traffic flow layer//Create a traffic flow layer instancevarTraffic =NewBmap.trafficlayer (); //add a layer to a mapMap.addtilelayer (traffic); /** Baidu Maps provides a more complex "tool" for interactive functions, including: Pushpintool: Labeling tools. This tool allows users to add labels to any area of the map. Distancetool: Distance measuring tool. This tool allows the user to measure the distance between any location on the map. Dragandzoomtool: Area Zoom tool. The tool zooms in or out of the map based on the size of the rectangular area the user dragged and dragged. **///Create a callout tool instance//var mypushpin = new Bmap.pushpintool (map);//listening for events, prompting for callout point coordinate information//Mypushpin.addeventlistener ("Markend", function (e) {//alert ("You marked the position:" +e.point.lng+ "," +e.point.lat ");//});//turn on labeling tools//Mypushpin.open ();function Iploac (result) {//set up the map center based on IP    varCityName =Result.name; //Map.setcenter (cityname);}varMycity =Newbmap.localcity (); mycity.Get(IPLOAC); function sear (result) {//Map Search  varLocal =NewBmap.localsearch (map, {renderoptions:{map:map}}); Local.search (result);}</script> 
//Blog.yourtion.com/baidu-maps-search-get-lonlat.html] Baidu Map API location search-get latitude and longitude [/url]"Text/javascript">var_gaq = _gaq | | []; _gaq.push (['_setaccount','ua-12599330-14']); _gaq.push (['_trackpageview']); (function () {varGA = document.createelement ('Script'); Ga.type ='Text/javascript'; Ga.Async=true; GA.SRC= ('https:'= = Document.location.protocol?'Https://ssl':'http://www') +'. Google-analytics.com/ga.js'; vars = document.getElementsByTagName ('Script')[0];  S.parentnode.insertbefore (GA, s); })();</script></body>
Simple Baidu Map Click to get the current geographical coordinates