在很多的時候我們需要在地圖上點擊一個地方，然后獲取當前地點的經度和緯度值，代碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度地圖API地點搜索-獲取經緯度DEMO</title> <meta name="description" content="百度地圖地點搜索和鼠標點擊地點獲取經緯度，這些都是地圖比較基本和實用的代碼，其中還包括了根據用戶IP進行地圖的顯示、改變地圖上的鼠標樣式、啟用滾輪縮放" /> <meta name="keywords" content="百度地圖,地點搜索,獲取經緯度,改變地圖鼠標樣式,啟用滾輪縮放" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> </head> <body> <form action="" method="get"> <label >地點：</label> <input id="where" name="where" type="text" > <input type="button" value="地圖上找" onClick="sear(document.getElementById('where').value);" /> <div style="width:520px;height:340px;border:1px solid gray" id="container"></div> 經緯度： <input id="lonlat" name="lonlat" type="text"> </form> <script type="text/javascript"> //在指定的容器內創建地圖實例 var map = new BMap.Map("container"); map.setDefaultCursor("crosshair");//設置地圖默認的鼠標指針樣式 map.enableScrollWheelZoom();//啟用滾輪放大縮小，默認禁用。 //創建點坐標 var point = new BMap.Point(120.386266, 30.307407); //初始化地圖，設置中心點坐標和地圖級別 map.centerAndZoom(point, 13); //panTo()方法 等待兩秒鍾后-讓地圖平滑移動至新中心點 /**window.setTimeout(function(){ map.panTo(new BMap.Point(120.386266, 30.307407)); }, 2000);**/ //***********************地址解析類 var gc = new BMap.Geocoder(); //向map中添加--------------------------------------控件 /**地圖API中提供的控件有： Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實現自定義控件。 NavigationControl：地圖平移縮放控件，默認位於地圖左上方，它包含控制地圖的平移和縮放的功能。 OverviewMapControl：縮略地圖控件，默認位於地圖右下方，是一個可折疊的縮略地圖。 ScaleControl：比例尺控件，默認位於地圖左下方，顯示地圖的比例關系。 MapTypeControl：地圖類型控件，默認位於地圖右上方。 CopyrightControl：版權控件，默認位於地圖左下方。 **/ //NavigationControl 地圖平移縮放控件，默認位於地圖左上方 它包含控制地圖的平移和縮放的功能。 map.addControl(new BMap.NavigationControl()); //OverviewMapControl 縮略地圖控件，默認位於地圖右下方，是一個可折疊的縮略地圖 map.addControl(new BMap.OverviewMapControl()); //ScaleControl：比例尺控件，默認位於地圖左下方，顯示地圖的比例關系。 map.addControl(new BMap.ScaleControl()); //MapTypeControl：地圖類型控件，默認位於地圖右上方。 map.addControl(new BMap.MapTypeControl()); //CopyrightControl：版權控件，默認位於地圖左下方 map.addControl(new BMap.CopyrightControl()); //----------------------------------------------地圖覆蓋物 /**地圖API提供了如下幾種覆蓋物： Overlay：覆蓋物的抽象基類，所有的覆蓋物均繼承此類的方法。 Marker：標注表示地圖上的點，可自定義標注的圖標。 Label：表示地圖上的文本標注，您可以自定義標注的文本內容。 Polyline：表示地圖上的折線。 Polygon：表示地圖上的多邊形。多邊形類似於閉合的折線，另外您也可以為其添加填充顏色。 Circle: 表示地圖上的圓。 InfoWindow：信息窗口也是一種特殊的覆蓋物，它可以展示更為豐富的文字和多媒體信息。注意：同一時刻只能有一個信息窗口在地圖上打開。 可以使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物，注意此方法不適用於InfoWindow。 **/ // 創建標注 var marker = new BMap.Marker(point); // 將標注添加到地圖中 map.addOverlay(marker); //********************************************監聽標注事件 //點擊事件 marker.addEventListener("click", function(e){ document.getElementById("lonlat").value = e.point.lng + ", " + e.point.lat; }); //*******************************************可托拽的標注 //marker的enableDragging和disableDragging方法可用來開啟和關閉標注的拖拽功能。 marker.enableDragging(); //監聽標注的dragend事件來捕獲拖拽后標注的最新位置 marker.addEventListener("dragend",function(e){ gc.getLocation(e.point, function(rs){ showLocationInfo(e.point, rs); }); }); //*****************************信息窗口 //顯示地址信息窗口 function showLocationInfo(pt, rs){ var opts = { width : 250, //信息窗口寬度 height: 150, //信息窗口高度 title : "當前位置" //信息窗口標題 } var addComp = rs.addressComponents; var addr = "當前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>"; addr += "緯度: " + pt.lat + ", " + "經度：" + pt.lng; var infoWindow = new BMap.InfoWindow(addr, opts); //創建信息窗口對象 marker.openInfoWindow(infoWindow); } map.addEventListener("click", function(e){//地圖單擊事件 document.getElementById("lonlat").value = e.point.lng + ", " + e.point.lat; }); //**************************** 目前百度地圖提供的圖層包括： //TrafficLayer：交通流量圖層 // 創建交通流量圖層實例 var traffic = new BMap.TrafficLayer(); // 將圖層添加到地圖上 map.addTileLayer(traffic); /** 百度地圖提供了交互功能更為復雜的“工具”，它包括： PushpinTool：標注工具。通過此工具用戶可在地圖任意區域添加標注。 DistanceTool：測距工具。通過此工具用戶可測量地圖上任意位置之間的距離。 DragAndZoomTool：區域縮放工具。此工具將根據用戶拖拽繪制的矩形區域大小對地圖進行放大或縮小操作。 **/ // 創建標注工具實例 //var myPushpin = new BMap.PushpinTool(map); // 監聽事件，提示標注點坐標信息 //myPushpin.addEventListener("markend",function(e){ // alert("你標注的位置:"+e.point.lng+","+e.point.lat); //}); // 開啟標注工具 //myPushpin.open(); function iploac(result){//根據IP設置地圖中心 var cityName = result.name; //map.setCenter(cityName); } var myCity = new BMap.LocalCity(); myCity.get(iploac); function sear(result){//地圖搜索 var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); local.search(result); } </script> <h2 >教程：[url=http://blog.yourtion.com/baidu-maps-search-get-lonlat.html]百度地圖API地點搜索-獲取經緯度[/url]</h2> <h3>輸入地點然后點擊“地圖上找”搜索，點擊地圖地點獲取相應經緯度</h3> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12599330-14']); _gaq.push(['_trackPageview']); (function() { var ga = 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'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>