百度地图定位
程序员文章站
2022-06-10 12:44:52
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=BPr36B36O2I3dEumnp3TQ8AX"></script>
<script>
//判断浏览器是否支持定位
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(success,error);
}else{
alert("你的浏览器不支持地理定位");
}
//获取地理位置成功
// success
// 成功得到位置信息时的回调函数，使用Position 对象作为唯一的参数。
// Position接口没有继承任何属性。
//
// Position.coords
// 返回一个定义了当前位置的Coordinates 对象.
// Position.timestamp
// 返回一个时间戳DOMTimeStamp， 这个时间戳表示获取到的位置的时间
function success(position){
console.info(position.coords);
var latitude = position.coords.latitude;//获取纬度
var longitude=position.coords.longitude;//获取经度
//显示百度地图
var map=new BMap.Map("container");//创建地图实例
var point = new BMap.Point(longitude,latitude);//创建坐标点
map.centerAndZoom(point,15);//初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);//滚轮控制地图大小
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var gc = new BMap.Geocoder();
gc.getLocation(point,function(rs){
var addComp=rs.addressComponents;
alert(addComp.province+","+addComp.city+","+addComp.district+","+addComp.street+","+addComp.streetNumber);
});
}
//获取地理位置失败
function error(error){
console.error(error);
}
</script>
</head>
<body>
<div id="container" style='width:500px;height:500px;'></div><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var btnOpsition=document.getElementById("getPosition");
btnOpsition.onclick=function(){
if(navigator.geolocation){
navigator.geolocation.watchPosition(success,onError,options);
}else{
alert("不支持获取当前位置");
}
}
function success(position){
let lat=position.coords.latitude;
let lon=position.coords.longitude;
alert("lat的纬度是"+lat+"lon的经度是"+lon);
}
function onError(err){
switch(err.code){
case 1:
alert("位置服务被拒绝");
break;
case 2:
alert("暂时获取不到位置信息");
break;
case 3:
alert("获取信息超时");
break;
case 4:
alert("未知错误");
break;
}
}
let options={
enableHighAccuracy:true,//要求高精度的地理信息
timeout:20000,//表示等待响应的最大时间，默认是0毫秒，表示无穷时间
maximumAge:1000//最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置
}
}
</script>
</head>
<body>
<input type="button" value="获取" id="getPosition"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=BPr36B36O2I3dEumnp3TQ8AX"></script>
<script>
window.onload=function(){
if(navigator.geolocation){
var options={
enableHighAccuracy:true,
timeout:5000,
maximumAge:0
}
navigator.geolocation.getCurrentPosition(success,onError,options);
function success(results){
var lag=results.coords.latitude;
var lng=results.coords.longitude;
var map=new BMap.Map("container");
var point=new BMap.Point(lng,lag);
map.centerAndZoom(point,15);
map.enableScrollWheelZoom(true);//滚轮控制地图大小
var marker=new BMap.Marker(point);
map.addOverlay(marker);
var gc =new BMap.Geocoder();
gc.getLocation(point,function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", "+ addComp.district + ", " + addComp.street + ", "+ addComp.streetNumber);
});
console.log("纬度"+results.coords.latitude+"经度"+results.coords.longitude);
}
function onError(err){
console.log("失败");
console.log(err);
}
}
else{
//不支持
alert("该浏览器不支持该geolocation");
}
}
</script>
</head>
<body>
<div id="container" style="width:500px;height: 500px;" ></div>
</body>
</html>
上一篇： 发布一个图形数字验证代码