HTML5獲取地理經緯度並通過百度接口得到實時位置
註：用的時候將獲取北京位置那放到獲取經度緯度後面即可
https://blog.csdn.net/dreamboycx/article/details/52130772
<!DOCTYPE html>
<html>
<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">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:500px; width: 500px; margin: 0 auto;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密鑰&callback=initialize"
</script>
</head>
<body>
<div style="text-align: center; margin: 20px auto;">
<p id="demo">點擊這個按鈕，獲得您的經緯度：</p>
<p id="position"></p>
<button onclick="getLocation()">獲取位置</button>
</div>
<div id="container"></div>
<script type="text/javascript">
var map;
var ggPoint;
var marker;
function getLocation(){
//根據IP獲取城市
var myCity = new BMap.LocalCity();
myCity.get(getCityByIP);
var options={
enableHighAccuracy:true,
maximumAge:1000
}
if(navigator.geolocation){
//瀏覽器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
}else{
//瀏覽器不支持geolocation
console.log("瀏覽器不支持");
}
}
function onSuccess(position){
var longitude =position.coords.longitude;//經度
var latitude = position.coords.latitude;//緯度
document.getElementById("demo").innerHTML = "程序已獲取你所在的位置為：<br>經度"+longitude+"，緯度"+latitude;
//--------------設置地圖顯示----------------
map = new BMap.Map("container"); // 創建地圖實例
ggPoint = new BMap.Point(longitude, latitude); // 創建點坐標
map.centerAndZoom(ggPoint, 15); // 初始化地圖，設置中心點坐標和地圖級別
//--------------設置地圖顯示----------------
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback);
//--------------設置標註相關-------------------
/*var marker = new BMap.Marker(point); // 創建點
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
marker.enableDragging();//設置點可拖動
//--------------設置標註相關---------------------
//--------------獲取地理位置---------------------
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});*/
//--------------獲取地理位置----------------------
}
//坐標轉換完之後的回調函數
function translateCallback(data){
if(data.status === 0) {
marker = new BMap.Marker(data.points[0]);
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
marker.enableDragging();//設置點可拖動
marker.addEventListener("dragend",getAttr);
//alert(marker.getPosition());
map.setCenter(data.points[0]);
getPosit(data.points[0]);
}
}
function getAttr(){
var p = marker.getPosition(); //獲取marker的位置
//alert("marker的位置是" + p.lng + "," + p.lat);
getPosit(new BMap.Point(p.lng, p.lat));
}
function getPosit(obj){
var geoc = new BMap.Geocoder();
geoc.getLocation(obj, function(rs){
var addComp = rs.addressComponents;
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
var address = "您的地址：" + addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street + "," + addComp.streetNumber;
document.getElementById("position").innerHTML = address;
//var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
//marker.setLabel(labelbaidu); //添加百度標註
});
}
//根據IP獲取城市
function getCityByIP(rs) {
var cityName = rs.name;
alert("根據IP定位您所在的城市為:" + cityName);
}
//失敗時
function onError(error){
switch(error.code){
case 1:
alert("位置服務被拒絕");
break;
case 2:
alert("暫時獲取不到位置信息");
break;
case 3:
alert("獲取信息超時");
break;
case 4:
alert("未知錯誤");
break;
}
}
</script>
</body>
</html>
HTML5獲取地理經緯度並通過百度接口得到實時位置