簡單的百度地圖點擊獲取當前地理座標

時間 2019-11-21
標籤簡單百度地圖點擊獲取當前地理座標简体版
原文原文鏈接
在不少的時候咱們須要在地圖上點擊一個地方，而後獲取當前地點的經度和緯度值，代碼以下：javascript
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。