要在HTML5中获取当前位置并在百度地图上显示,你可以按照以下步骤操作:
1. 获取百度地图API密钥(AK)
首先,你需要在百度地图开放平台申请成为百度开发者并获取一个自己的密钥(AK)。百度地图开放平台
2. 引入百度地图API
在你的HTML文件中引入百度地图API,并指定你的AK:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
3. 创建地图容器
在HTML中创建一个容器来显示地图:
<div id="container" style="height:100%;"></div>
4. 初始化地图
使用JavaScript初始化百度地图:
var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(116.331398, 39.897445); // 创建点坐标
map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别
5. 获取当前位置
使用HTML5 Geolocation API获取当前位置:
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point); // 创建标注
map.addOverlay(mk); // 将标注添加到地图中
map.panTo(r.point); // 使地图平移到标注点
alert('您的位置:'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
});
6. 转换坐标并显示位置
由于HTML5 Geolocation API获取的坐标是GPS坐标,而百度地图使用的是经过转换的坐标,所以需要进行坐标转换:
var point = new BMap.Point(r.point.lng, r.point.lat);
BMap.Convertor.translate(point, 0, function(newPoint){
var marker = new BMap.Marker(newPoint); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(newPoint); // 使地图平移到标注点
});
7. 获取当前位置的地址信息
使用Geocoder获取当前位置的详细地址信息:
var geocoder = new BMap.Geocoder();
geocoder.getLocation(newPoint, function(result){
if (result){
alert("您当前所在位置是:" + result.address);
}
});
以上步骤可以帮助你在HTML5中获取当前位置并在百度地图上显示。请确保替换你的密钥
为你从百度地图开放平台获取的实际密钥。
评论已关闭