springboot+vue项目如何通过百度地图定位当前位置
时间: 2023-12-11 07:05:43 浏览: 66
实现百度地图定位当前位置的步骤如下:
1. 在前端代码中引入百度地图 JavaScript API,并创建地图对象。
```html
<!-- 引入百度地图 JavaScript API -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
<!-- 创建地图容器 -->
<div id="map"></div>
<!-- 在 JavaScript 中创建地图对象 -->
<script type="text/javascript">
// 创建地图对象
var map = new BMap.Map("map");
</script>
```
2. 调用浏览器的定位 API 获取当前位置的经纬度。
```javascript
navigator.geolocation.getCurrentPosition(function(position) {
// 获取当前位置的经纬度
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
});
```
3. 将获取到的经纬度转换为百度地图坐标系,并在地图上添加标注点。
```javascript
// 将经纬度转换为百度地图坐标系
var point = new BMap.Point(longitude, latitude);
// 在地图上添加标注点
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 将地图中心点设置为当前位置
map.centerAndZoom(point, 15);
```
完整代码示例:
```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=你的AK"></script>
</head>
<body>
<div id="map" style="width:100%;height:500px;"></div>
<script type="text/javascript">
// 创建地图对象
var map = new BMap.Map("map");
// 获取当前位置的经纬度
navigator.geolocation.getCurrentPosition(function(position) {
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
// 将经纬度转换为百度地图坐标系
var point = new BMap.Point(longitude, latitude);
// 在地图上添加标注点
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 将地图中心点设置为当前位置
map.centerAndZoom(point, 15);
});
</script>
</body>
</html>
```