需求：H5中获得用户位置授权后获取终端经纬度和地点名称，PC/移动端适用。
前言:在初始化配置的时候我尽量多分步骤详细 毕竟配置项有点多 容易蒙圈 用一个东西我们主要的目的是学习他而不是直接用 授人以鱼不如授人以渔(可以跳过 文章后面有完整代码)
第一步 :引入高德API库：
import AMapLoader from '@amap/amap-jsapi-loader'
第二步:绘制地图
<template>
<section id="amapContainer" />
</template>
第三步:添加密钥
找到index.html页面 添加密钥
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "", //你项目的密钥
};
</script>
第四步:初始化地图配置(下面代码所有都亲测有效 直接按照步骤复制阅读就行)
步骤一 :在需要的页面进入引入
import AMapLoader from "@amap/amap-jsapi-loader";
步骤二:首先地图加载参数和地图绘制参数以及添加插件 这里vue2和vue3的用法是一样的 只需要把格式改一下就好了 (建议直接复制vscod更加直观)
<script>
export default {
data() {
return {
data() {
/*
key：填写自己web端开发者的key
其他配置可以默认无需更改
*/
return {
//此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
// map: null,
//地图加载参数
AMapLoader: {
key: "0f742bca0083cbde739491388f2bddc2", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
/*
AMap.Geocoder 地理编码与逆地理编码
AMap.Geolocation 高德基于浏览器API的定位插件
*/
plugins: ["AMap.Geolocation", "AMap.Geocoder"], // 需要使用的插件列表，所有的插件都在这里配置
},
//地图绘制参数
parameter: {
zoom: 11, //级别
viewMode: "3D", //使用3D视图
resizeEnable: true,
enableHighAccuracy: true, //是否使用高精度定位，默认:true
convert: true,
},
};
},
};
},
};
</script>
步骤三 获取高德地图实例(必须要在钩子里面执行,记得地图设置宽高 不然显示不出来)
mounted() {
/* 注意 : 【高德的所有API都需要再load回调里面进行书写 需要用到返回值AMap 否则都会报错】 */
AMapLoader.load(this.AMapLoader).then((AMap) => {
//存储实例地图
this.map = new AMap.Map("container", this.parameter);
});
},
步骤四:设置地图点击事件 获取用户点击地图的地理位置
mounted() {
/* 注意 : 【高德的所有API都需要再load回调里面进行书写 需要用到返回值AMap 否则都会报错】 */
AMapLoader.load(this.AMapLoader).then((AMap) => {
//存储实例地图
this.map = new AMap.Map("container", this.parameter);
//绑定地图点击事件
this.map.on("click", function (e) {
console.log(e, "点击地图获取位置");
});
});
},
步骤五:实例逆向转码(所有的插件都需要用到AMap进行new实例)
mounted() {
/* 注意 : 【高德的所有API都需要再load回调里面进行书写 需要用到返回值AMap 否则都会报错】 */
AMapLoader.load(this.AMapLoader).then((AMap) => {
//存储实例地图
this.map = new AMap.Map("container", this.parameter);
//实例逆向转码
const Geocoder = new AMap.Geocoder();
this.map.on("click", function (e) {
console.log(e, "点击地图获取位置");
});
});
},
步骤五:获取用户当前地理位置(注意要写在then回调里面 否则会报错)
mounted() {
/* 注意 : 【高德的所有API都需要再load回调里面进行书写 需要用到返回值AMap 否则都会报错】 */
AMapLoader.load(this.AMapLoader).then((AMap) => {
//存储实例地图
this.map = new AMap.Map("container", this.parameter);
//实例逆向转码
const Geocoder = new AMap.Geocoder();
this.map.on("click", function (e) {
console.log(e, "点击地图获取位置");
});
this.map.plugin("AMap.Geolocation", () => {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
geolocation.getCurrentPosition(function (status, result) {
if (status == "complete") {
//授权成功获取的经纬度
const {
position: { lng, lat },
} = result;
console.log(lng,lat);
}
});
});
});
},
步骤六:定义逆地理编码+正地理编码工具函数
methods: {
// 根据获取到的经纬度进行逆地理编码
/*
real:逆向转码实例 就是 Geocoder
lng和lat就是经纬度
*/
reverse(real, lng, lat) {
real.getAddress([lng, lat], (status, res) => {
if (status === "complete") {
// address即经纬度转换后的地点名称
console.log(res, status);
}
});
},
// 根据获取到的经纬度进行正向地理编码
/*
real:逆向转码实例 就是 Geocoder
lng和lat就是具体地理位置
*/
limit(real,address){
real.getLocation(address,(res,req)=>{
console.log(res,req);
})
}
},
步骤七 使用工具函数编码
mounted() {
AMapLoader.load(this.AMapLoader).then((AMap) => {
//实例地图
this.map = new AMap.Map("container", this.parameter);
//实例逆向转码
const Geocoder = new AMap.Geocoder();
let that = this;
this.map.on("click", function (e) {
//根据获取到的经纬度进行逆地理编码
that.reverse(Geocoder, e.lnglat.getLng(), e.lnglat.getLat());
//根据获取到的经纬度进行正向地理编码
that.limit(Geocoder,'北京市朝阳区阜荣街10号')
});
this.map.plugin("AMap.Geolocation", () => {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
geolocation.getCurrentPosition(function (status, result) {
if (status == "complete") {
const {
position: { lng, lat },
} = result;
// 根据获取到的经纬度进行逆地理编码
that.reverse(Geocoder, lng, lat);
}
});
});
});
},
这就是完整步骤了
下面放整个代码图
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
data() {
return {
//此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
map:null,
//地图加载参数
AMapLoader: {
key: " 0f742bca0083cbde739491388f2bddc2", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Geolocation", "AMap.Geocoder"], // 需要使用的插件列表，如比例尺'AMap.Scale'等
},
//地图绘制参数
parameter: {
zoom: 11, //级别
viewMode: "3D", //使用3D视图
resizeEnable: true,
enableHighAccuracy: true, //是否使用高精度定位，默认:true
convert: true,
},
};
},
methods: {
// 根据获取到的经纬度进行逆地理编码
/*
real:逆向转码实例 就是 Geocoder
lng和lat就是经纬度
*/
reverse(real, lng, lat) {
real.getAddress([lng, lat], (status, res) => {
if (status === "complete") {
// address即经纬度转换后的地点名称
console.log(res, status);
}
});
},
// 根据获取到的经纬度进行正向地理编码
/*
real:逆向转码实例 就是 Geocoder
lng和lat就是具体地理位置
*/
limit(real,address){
real.getLocation(address,(res,req)=>{
console.log(res,req);
})
}
},
mounted() {
AMapLoader.load(this.AMapLoader).then((AMap) => {
//实例地图
this.map = new AMap.Map("container", this.parameter);
//实例逆向转码
const Geocoder = new AMap.Geocoder();
let that = this;
this.map.on("click", function (e) {
//根据获取到的经纬度进行逆地理编码
that.reverse(Geocoder, e.lnglat.getLng(), e.lnglat.getLat());
//根据获取到的经纬度进行正向地理编码
that.limit(Geocoder,'北京市朝阳区阜荣街10号')
});
this.map.plugin("AMap.Geolocation", () => {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
geolocation.getCurrentPosition(function (status, result) {
if (status == "complete") {
const {
position: { lng, lat },
} = result;
// 根据获取到的经纬度进行逆地理编码
that.reverse(Geocoder, lng, lat);
}
});
});
});
},
};
</script>
<style>
#container {
width: 1000px;
height: 500px;
}
</style>
最终效果图
