web端定位：獲取當前地理位置

時間 2019-11-12

原文原文鏈接

方法一：html5原生提供的定位：javascript

講解：在支持HTML5的瀏覽器下，navigator對象下有一個屬性----geolocation，而geolocation屬性又有個方法getCurrentPosition(回調函數1，回調函數2)能夠經過瀏覽器向設備發起定位請求，瀏覽器就會讓設備發送相關指令到附近上網設備，上網設備返回定位信息給用戶設備，瀏覽器就得到了用戶位置。
當瀏覽器得到定位信息成功，則navigator.geolocation.getCurrentPosition(回調函數1,回調函數2); 中的回調函數1執行，若是定位失敗，則回調函數2執行。
若定位成功，則自動把定位結果對象做爲參數傳遞給回調函數1,。若定位失敗，則自動把錯誤對象傳遞給回調函數2. 因此在回調函數2中可經過error.code 獲取到錯誤碼。（假設形參名爲error）。
以下代碼就是用HTML5獲取定位信息，並把成功定位交給showPosition處理，把錯誤定位交給showError處理。php

eg：css

if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
     alert(Geolocation is not supported by this browser);
} //瀏覽器不支持HTML5.

詳細代碼：html

<!DOCTYPE html> 
<html lang="zh-cn"> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
*{ 
height: 100%; //設置高度，否則會顯示不出來 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=··············"></script> 
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> 
<script> 
$(function(){ 
   navigator.geolocation.getCurrentPosition(translatePoint); //定位 
}); 
function translatePoint(position){ 
  var currentLat = position.coords.latitude; 
  var currentLon = position.coords.longitude; 
  var gpsPoint = new BMap.Point(currentLon, currentLat); 
  BMap.Convertor.translate(gpsPoint, 0, initMap); //轉換座標：gpsPoint：轉換前座標，第二個參數爲轉換方法，0表示gps座標轉換成百度座標，callback回調函數，參數爲新座標點 
} 
function initMap(point){ 
  //初始化地圖 
  map = new BMap.Map("map"); 
  map.addControl(new BMap.NavigationControl()); 
  map.addControl(new BMap.ScaleControl()); 
  map.addControl(new BMap.OverviewMapControl()); 
  map.centerAndZoom(point, 15); 
  map.addOverlay(new BMap.Marker(point)) 
} 
</script> 
</head> 
<body> 
  <div id="map"></div> 
</body> 
</html>

註釋：html5

這是由於htm5 的 getCurrentPosition 獲取到的座標是 GPS 經緯度座標，而百度地圖的座標是通過特殊轉換的，因此，在獲取定位座標和初始化地圖之間須要進行一步座標轉換工做，該轉換方法百度API裏面已經提供了，轉換一個點或者批量裝換的方法均有提供：單個點轉換需引用 http://developer.baidu.com/map/jsdemo/demo/convertor.js，批量轉換需引用 http://developer.baidu.com/map/jsdemo/demo/changeMore.js，這裏只須要前者便可： java

方法二:百度地圖提供的APIjquery

（1）經過瀏覽器定位：git

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
	<title>瀏覽器定位</title>
<script async src="http://c.cnzz.com/core.php"></script></head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地圖API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point,12);

	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			alert('您的位置：'+r.point.lng+','+r.point.lat);
		}
		else {
			alert('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true})
	//關於狀態碼
	//BMAP_STATUS_SUCCESS	檢索成功。對應數值「0」。
	//BMAP_STATUS_CITY_LIST	城市列表。對應數值「1」。
	//BMAP_STATUS_UNKNOWN_LOCATION	位置結果未知。對應數值「2」。
	//BMAP_STATUS_UNKNOWN_ROUTE	導航結果未知。對應數值「3」。
	//BMAP_STATUS_INVALID_KEY	非法密鑰。對應數值「4」。
	//BMAP_STATUS_INVALID_REQUEST	非法請求。對應數值「5」。
	//BMAP_STATUS_PERMISSION_DENIED	沒有權限。對應數值「6」。(自 1.1 新增)
	//BMAP_STATUS_SERVICE_UNAVAILABLE	服務不可用。對應數值「7」。(自 1.1 新增)
	//BMAP_STATUS_TIMEOUT	超時。對應數值「8」。(自 1.1 新增)
</script>

（2）經過ip定位：web

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
	<title>IP定位獲取當前城市</title>
<script async src="http://c.cnzz.com/core.php"></script></head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地圖API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point,12);

	function myFun(result){
		var cityName = result.name;
		map.setCenter(cityName);
		alert("當前定位城市:"+cityName);
	}
	var myCity = new BMap.LocalCity();
	myCity.get(myFun);
</script>

百度地圖Api：api

//讓全部點在視野範圍內 pointArray：點集合
map.setViewport(pointArray);

//清除全部點集合
map.clearOverlays();

註釋：

百度地圖開放平臺：http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding

百度地圖生成器：http://api.map.baidu.com/lbsapi/creatmap/index.html

http://developer.baidu.com/map/jsdemo.htm#i8_2

申請百度地圖API密匙步驟：http://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html

百度地圖地名轉換成經緯度參考文章：http://www.jb51.net/article/58396.htm

方法三：高德地圖定位：

地址：http://lbs.amap.com/api/javascript-api/example/map/map-show/

你們本身去查看

參考：http://blog.csdn.net/suixufeng/article/details/13511761

http://www.jb51.net/html5/208408.html

http://blog.csdn.net/xmtblog/article/details/45093661

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。