意见箱
恒创运营部门将仔细参阅您的意见和建议,必要时将通过预留邮箱与您保持联络。感谢您的支持!
意见/建议
提交建议

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

来源:恒创科技 编辑:恒创科技编辑部
2024-02-03 23:35:59


大厦大厦大厦大厦在



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

<!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="/news/upload/ueditor/image/202209/wohjozwccya style="color: #22863a;color: #997;">>
//v2.0版本的引用方式:src="/news/upload/ueditor/image/202209/3tyhdhlya0u style="color: #6a737d;">//v1.4版本及以前版本的引用方式:src="/news/upload/ueditor/image/202209/0ui4nk5qrcl style="color: #22863a;color: #997;"></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);
}





上一篇: 关于ecmall中后台配置信息的说明 下一篇: 手机怎么远程登录云服务器?