一：安装依赖
npm install vue-amap --save
二：main.js中的配置
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'd6eabbd08f89ccfb74278b36ab6342567', // 自己到官网申请，我随便写的
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation','Geocoder'],//plugin所要用到的模块功能，按需添加
v: '1.4.4',//高德 sdk 版本为 1.4.4
});
template中使用
position: [{{ lng }}, {{ lat }}] address: {{ address }},个人location:{{location}}
import location from "../../utils/positionLocation.js";
export default {
name: "page",
data() {
let self = this;
return {
title: "标题",
zoom: 12,
center: [120.011574, 30.286369],
address: "",
events: {
click(e) {
let { lng, lat } = e.lnglat;
self.lng = lng;
self.lat = lat;
// 这里通过高德 SDK 完成。
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress([lng, lat], function(status, result) {
// console.log(status, result);
if (status === "complete" && result.info === "OK") {
if (result && result.regeocode) {
console.log(result);
self.address = result.regeocode.formattedAddress;
self.$nextTick();
}
}
});
}
},
lng: 0,
lat: 0,
location: ""
};
},
components: {},
mounted() {
this.getLocation();
},
methods: {
getLocation() {
let _that = this;
let geolocation = location.initMap("map-container"); // 定位
AMap.event.addListener(geolocation, "complete", result => {
console.log(result);
let { lng, lat } = result.position;
_that.lat = result.position.lat;
_that.lng = result.position.lng;
_that.location = result.formattedAddress;
});
}
}
};
主要获取定位：
var map, geolocation;
//加载地图，调用浏览器定位服务 高德地图
map = new AMap.Map("container", {
resizeEnable: true
});
map.plugin("AMap.Geolocation", function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
buttonPosition: "RB"
});
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, "complete", function onComplete(
data
) {
console.log(data);
var lng = data.position.getLng();
var lat = data.position.getLat();
// alert(getLongitude + "," + getLatitude); //弹出获得的经纬度
// that.item.address = getLongitude + "," + getLatitude;
var address = data.formattedAddress;
console.log(lng, lat, address);
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress([lng, lat], function(status, result) {
console.log(status, result);
if (status === "complete" && result.info === "OK") {
if (result && result.regeocode) {
console.log(result);
let data = result.regeocode.addressComponent;
that.item.address = data.province + data.city + data.district;
// self.$nextTick();
Indicator.close();
}
}
});
}); //返回定位信息
});
另一种方式
创建一个名为positionLocation.js的文件，文件内容如下：
/**
* 高德地图定位
* @type {{}}
*/
const location = {
initMap(id) {
let mapObj = new AMap.Map(id, {})
let geolocation;
mapObj.plugin(['AMap.Geolocation'], function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默认:true
timeout: 10000, // 超过10秒后停止定位，默认：无穷大
maximumAge: 0, // 定位结果缓存0毫秒，默认：0
convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, // 显示定位按钮，默认：true
buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
})
mapObj.addControl(geolocation)
geolocation.getCurrentPosition()
})
return geolocation;
}
}
export default location
在要用到相关定位功能的页面引入该js文件
import AMap from 'AMap'
import location from '../../javascript/positionLocation.js'
export default {
data() {
return {
// 高德地图获取当前位置
location: '',
lat: 0,
lng: 0,
}
},
mounted() {
this.getLocation(); // 调用获取地理位置
},
methods: {
/** 获取高德地图定位 */
getLocation() {
let _that = this
let geolocation = location.initMap('map-container') // 定位
AMap.event.addListener(geolocation, 'complete', result => {
console.log(result)
_that.lat = result.position.lat
_that.lng = result.position.lng
_that.location = result.formattedAddress
})
},
}
注意key的时效性,过时了formattedAddress可能会获取不到
如果觉得《vue 获取当前位置 高德_vue高德地图获取当前位置》对你有帮助，请点赞、收藏，并留下你的观点哦！
