1. 引入百度
地图API的
JS文件
```html
<script type="text/
javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
```
2. 创建
地图容器
```html
<div id="mapContainer" style="width: 100%; height: 500px;"></div>
```
3. 初始化
地图对象
```
javascript
var map = new BMap.Map("mapContainer"); // 创建
地图实例
map.centerAndZoom(new BMap.Point(114.521, 38.048), 12); // 初始化
地图，设置中心点坐标和缩放级别
```
4. 添加定位控件
```
javascript
var geolocationControl = new BMap.GeolocationControl(); // 创建定位控件实例
map.addControl(geolocationControl); // 添加定位控件到
地图中
```
5. 使用定位控件定位当前位置
```
javascript
geolocationControl.addEventListener("locationSuccess", function(e){
// 定位成功事件
var point = new BMap.Point(e.point.lng, e.point.lat); // 获取定位坐标
map.panTo(point); // 将
地图中心点移动到定位点
});
geolocationControl.addEventListener("locationError", function(e){
// 定位失败事件
alert(e.message);
});
```
完整
代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度
地图定位示例</title>
<script type="text/
javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
</head>
<body>
<div id="mapContainer" style="width: 100%; height: 500px;"></div>
<script type="text/
javascript">
var map = new BMap.Map("mapContainer"); // 创建
地图实例
map.centerAndZoom(new BMap.Point(114.521, 38.048), 12); // 初始化
地图，设置中心点坐标和缩放级别
var geolocationControl = new BMap.GeolocationControl(); // 创建定位控件实例
map.addControl(geolocationControl); // 添加定位控件到
地图中
geolocationControl.addEventListener("locationSuccess", function(e){
// 定位成功事件
var point = new BMap.Point(e.point.lng, e.point.lat); // 获取定位坐标
map.panTo(point); // 将
地图中心点移动到定位点
});
geolocationControl.addEventListener("locationError", function(e){
// 定位失败事件
alert(e.message);
});
</script>
</body>
</html>
```
注意替换您的密钥。
扫一扫
1191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
