1. 引入
百度地图API的JS文件
```html
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK值"></script>
```
其中，AK值需要在
百度地图开放平台申请获得。
2. 创建地图对象
```javascript
var map = new BMap.Map("container"); // container为地图容器的ID值
```
3. 启用
GPS定位
```javascript
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);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
```
其中，BMap.Geolocation()为
百度地图API提供的
GPS定位功能，getCurrentPosition()为获取当前位置信息的方法。如果
定位成功，将当前位置标记在地图上，并将地图中心点设置为当前位置。如果
定位失败，弹出提示框。
完整代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
百度地图
GPS定位</title>
<style type="text/css">
html,body,#container{
width:100%;
height:100%;
margin:0;
font-family:"微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK值"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
// 创建地图对象
var map = new BMap.Map("container");
// 启用
GPS定位
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);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
</script>
</body>
</html>
```
注意事项：
1. 需要在HTTPS环境下使用
GPS定位功能。
2.
定位功能需要用户授权，浏览器会弹出提示框，用户需要点击允许才能使用
定位功能。
扫一扫
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
