HTML5获取地理经纬度并通过百度接口得到实时位置

最新推荐文章于 2024-04-24 15:32:07 发布

dreamboycx

最新推荐文章于 2024-04-24 15:32:07 发布

阅读量8.8k

点赞数 2

分类专栏：前端设计

本文链接：https://blog.csdn.net/dreamboycx/article/details/52130772

版权

前端设计专栏收录该内容

121 篇文章 1 订阅

订阅专栏

大厦大厦大厦大厦在

<!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 οnclick="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>

var map;
var newPoint;
var biaoZhuAddress="";
var linshi_point;
function getLocationByMap(){//mui.alert(2222);
	var options={
		enableHighAccuracy:true,//表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间
		maximumAge:1000,//表示浏览器重新获取位置信息的时间间隔
		timeout:60000//表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback
	}
	if(navigator.geolocation){
		navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
	}else{
		//alert("该浏览器不支持获取地理位置");
		mui.toast("该浏览器不支持获取地理位置");
	}
}
function onError(error){//mui.alert(error.code);
	switch(error.code){
		case error.PERMISSION_DENIED:
			//alert("用户不允许地理定位");
			mui.toast("用户不允许地理定位");
			break;
		case error.POSITION_UNAVAILABLE:
			//alert("无法获取当前位置");
			mui.toast("无法获取当前位置");
			break;
		case error.TIMEOUT:
			//alert("操作超时");
			mui.toast("操作超时");
			break;
		case error.UNKNOWN_ERROR:
			//alert("未知错误");
			mui.toast("未知错误");
			break;
	}
}
function onSuccess(position){
	var longitude =position.coords.longitude;//经度
	var latitude = position.coords.latitude;//纬度
	//alert(longitude+"---"+latitude);
	//转换坐标
	var ggPoint = new BMap.Point(longitude, latitude);//创建点坐标 
	var convertor = new BMap.Convertor();
	var pointArr = [];
	pointArr.push(ggPoint);
	convertor.translate(pointArr,1,5,translateCallback);
}
//坐标转换完之后的回调函数
function translateCallback(data){
	if(data.status === 0) {
		//根据坐标获取当前地址信息
		newPoint=data.points[0];
		getGeoAddr(newPoint,0);
	}else{
		//alert("坐标转换失败");
		mui.toast("坐标转换失败");
	}
}
//obj地址对象，type为0调用setAllValue为1调用setOneValue
function getGeoAddr(obj,type){
	var geoc = new BMap.Geocoder();
	geoc.getLocation(obj,function(rs){
		var addComp = rs.addressComponents;
		var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
		if(type==1){
			setOneValue(address);
		}else{
			setAllValue(address);
		}
	});
}
function setAllValue(address){
	biaoZhuAddress=address;
	if(document.getElementById("mapAddr")){
		document.getElementById("mapAddr").innerHTML = address;
	}
	if(document.getElementById("businessAddr")){
		document.getElementById("businessAddr").value = address;
	}
	setOneValue(address);
}
function setOneValue(address){
	if(document.getElementById("mapTuoAddr")){
		document.getElementById("mapTuoAddr").innerHTML = address;
	}
}
function loadMap(){
	setOneValue(biaoZhuAddress);
	//初始化地图
	map = new BMap.Map("mapInfo");//创建地图实例
	var geolocationControl = new BMap.GeolocationControl();
	geolocationControl.addEventListener("locationSuccess", function(e){
		// 定位成功事件
		linshi_point=e.point;
		var address = '';
		address += e.addressComponent.province;
		address += e.addressComponent.city;
		address += e.addressComponent.district;
		address += e.addressComponent.street;
		address += e.addressComponent.streetNumber;
		setOneValue(address);
	});
	geolocationControl.addEventListener("locationError",function(e){
		// 定位失败事件
		//alert(e.message);
		mui.toast(e.message);
	});
	map.addControl(geolocationControl);
	map.centerAndZoom(newPoint,15);//初始化地图，设置中心点坐标和地图级别
	map.addEventListener("dragend",function(e){
		//创建标注
		//map.clearOverlays();
		//marker = new BMap.Marker(map.getCenter());
		//map.addOverlay(marker);
		var getCenter=map.getCenter();
		linshi_point=getCenter;
		getGeoAddr(getCenter,1);
	});
}
//确认标注
function queRenBiaoZhu(){
	if(linshi_point){
		newPoint=new BMap.Point(linshi_point.lng,linshi_point.lat);
	}
	var address=document.getElementById("mapTuoAddr").innerHTML;
	setAllValue(address);
}

dreamboycx

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML5获取地理经纬度并通过百度接口得到实时位置

大厦大厦大厦大厦在获取当前位置 html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:500px; width: 500px; margin: 0 auto;} //v2.0版本的引用方式：src="http://api.map
复制链接

扫一扫