JavaScript调用百度API定位当前位置，显示百度地图，并且在当前位置标注
1 创建定位对象，获得当前位置
var geolocation = new BMap.Geolocation(); //创建定位对象 geolocation.getCurrentPosition(回调方法); //获得当前位置
2 当前位置添加标注
/地图添加标注 //r.point当前位置 var mk = new BMap.Marker(r.point); map.addOverlay(mk);
3 移动地图的中心点到地图中间
var pt = r.point; map.panTo(pt);//移动地图中心点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="author" content="wanmait">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#address{
width:800px;
height:600px;
}
</style>
<title>Document</title>
<script src="/test/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图AK"></script>
</head>
<body>
<p id="address"></p>
<script>
var map = new BMap.Map("address");//创建Map
var point = new BMap.Point(116.331398,39.897445);//创建定坐标
map.centerAndZoom(point,12); //初始化地图,设置中心点坐标和地图级别
var geolocation = new BMap.Geolocation();
//创建定位对象
// 开启SDK辅助定位
geolocation.enableSDKLocation();
//获得当前位置
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
//地图添加标注
//r.point当前位置
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
var pt = r.point;
map.panTo(pt);//移动地图中心点
}
});
</script>
</body>
</html>显示效果：
0条评论
点击登录参与评论