写一下uniapp的高德地图代码 获取位置 显示当前位置
时间: 2023-06-01 19:06:31 浏览: 147
好的,关于uniapp的高德地图代码,以下是一个简单的实现示例:
1. 引入高德地图JS API:
```html
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=YOUR_API_KEY"></script>
```
需要将 YOUR_API_KEY 替换成你自己的高德地图开发者账号的 API Key。
2. 初始化地图:
```js
var map = new AMap.Map('container', {
center: [116.397428, 39.90923],
zoom: 13
});
```
其中,"container" 是地图容器的ID,可以根据自己的情况进行修改。[116.397428, 39.90923] 是地图中心点的经纬度,zoom 是地图缩放级别。
3. 获取当前位置:
```js
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,
timeout: 10000,
buttonOffset: new AMap.Pixel(10, 20),
zoomToAccuracy: true,
buttonPosition: 'RB'
});
map.addControl(geolocation);
geolocation.getCurrentPosition(function(status, result) {
if (status === 'complete') {
onLocateSuccess(result);
} else {
onLocateError(result);
}
});
});
function onLocateSuccess(result) {
var position = result.position; // 经纬度信息
var address = result.formattedAddress; // 详细地址信息
var marker = new AMap.Marker({position: position});
map.add(marker);
map.setCenter(position);
}
function onLocateError(result) {
console.error(result);
}
```
上述代码使用 AMap.Geolocation 插件获取当前位置,并将地图中心点设置为当前位置。同时,会在地图上添加一个标记,用于标识当前位置。
需要注意的是,需要在高德开发者平台申请相关权限才能使用 AMap.Geolocation 插件。
希望能帮到你,如果还有其他问题,请随时提出。
阅读全文