高德API获取当前地址
小于 1 分钟
提示
高德API获取当前地址
1. 在nginx中配置
location /_AMapService/ {
set $args "$args&jscode=${jsCode}";
proxy_pass https://restapi.amap.com/;
}
2. 前端vue项目
npm i @amap/amap-jsapi-loader --save
3. vue代码
<script setup>
import { reactive } from "vue"
import AMapLoader from '@amap/amap-jsapi-loader';
const geo = reactive({
data: "请求中"
})
const area = reactive({
data: "请求中"
})
window._AMapSecurityConfig = {
serviceHost:'https://${service}/_AMapService'
}
AMapLoader.load({
"key": "${KEY}", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": ['AMap.Geolocation', 'AMap.Geocoder'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap) => {
let geolocation = new AMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000
});
let geocoder = new AMap.Geocoder();
geolocation.getCurrentPosition((status, result) => {
if (status == 'complete') {
geo.data = JSON.stringify(result);
geocoder.getAddress(result.position, function (status, result) {
if (status == 'complete' && result.info === 'OK') {
area.data = JSON.stringify(result);
} else {
area.data = "查询区域失败"
}
});
} else {
geo.data = "获取定位失败"
}
})
}).catch(e => {
console.log(e);
})
</script>
<template>
具体位置定位: {{ geo.data }} <br />
省市区信息: {{ area.data }} <br />
</template>