vue中如何实现高德定位功能-创新互联
这篇文章主要介绍vue中如何实现高德定位功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
一、获取key及在index.htm中引入
首先需要成为高德开发者，申请到适合项目的key.并在index.html中进行引入
二、在配置文件中进行相应配置
根据vue脚手架的不用需要在不同的文件中进行配置。
我项目使用的是cli3的脚手架，需要在Vue.config.js中进行高德地图配置
externals: {
'AMap': 'AMap' // 高德地图配置
}三、在需要用到的地方进行地图初始化及定位操作
因项目需求只需要在注册页面进行默认定位，故只引用一次就行。并没有单独的抽离出来，可以根据项目的需求进行抽离。
import AMap from "AMap"; // 引入高德地图
data() {
// debugger
return {
locationData: {
// 用于定位相关信息提交
lat: "", // 纬度
lon: "", // 经度
province: "", // 省
city: "", // 市
district: "", // 区 县
nowPlace: "", // 省-市-区
Address: "" // 详细地址
}
};
},
methods:{
getLocation() {
const self = this;
AMap.plugin("AMap.Geolocation", function() {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默认:true
timeout: 10000, // 超过10秒后停止定位，默认：无穷大
maximumAge: 0, // 定位结果缓存0毫秒，默认：0
convert: true // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
});
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, "complete", onComplete);
AMap.event.addListener(geolocation, "error", onError);
function onComplete(data) {
// data是具体的定位信息
// debugger
console.log("定位成功信息：", data);
self.newGetAddress(data.position.lat, data.position.lng);
}
function onError(data) {
// debugger
// 定位出错
console.log("定位失败错误：", data);
self.getLngLatLocation();
}
});
},
getLngLatLocation() {
const self = this;
AMap.plugin("AMap.CitySearch", function() {
var citySearch = new AMap.CitySearch();
citySearch.getLocalCity(function(status, result) {
if (status === "complete" && result.info === "OK") {
// 查询成功，result即为当前所在城市信息
console.log("通过ip获取当前城市：", result);
//逆向地理编码
AMap.plugin("AMap.Geocoder", function() {
var geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
city: result.adcode
});
var lnglat = result.rectangle.split(";")[0].split(",");
geocoder.getAddress(lnglat, function(status, data) {
if (status === "complete" && data.info === "OK") {
// result为对应的地理位置详细信息
console.log(data);
self.userInfo.ProvinceName = data.regeocode.addressComponent.province.toString();
self.userInfo.CCityName =
data.regeocode.addressComponent.city;
self.userInfo.RegionName =
data.regeocode.addressComponent.district;
}
});
});
}
});
});
},
newGetAddress: function(latitude, longitude) {
const _thisSelf = this;
_thisSelf.locationData.lat = latitude;
_thisSelf.locationData.lon = longitude;
const mapObj = new AMap.Map("mapAmap1");
mapObj.plugin("AMap.Geocoder", function() {
const geocoder = new AMap.Geocoder({
city: "全国", // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
radius: 100 // 以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
});
const lnglat = [longitude, latitude]; // 倒序反写经纬度
// 天津120 北京110 上海310 重庆500 ,
const reg1 = /^[1][1][0][0-9][0-9][0-9]/;
const reg2 = /^[1][2][0][0-9][0-9][0-9]/;
const reg3 = /^[5][0][0][0-9][0-9][0-9]/;
const reg4 = /^[3][1][0][0-9][0-9][0-9]/;
geocoder.getAddress(lnglat, function(status, result) {
console.log("getAddress", result);
if (status === "complete" && result.info === "OK") {
// result为对应的地理位置详细信息
const adcode = result.regeocode.addressComponent.adcode; // 省市编码
if (
reg1.test(adcode) ||
reg2.test(adcode) ||
reg3.test(adcode) ||
reg4.test(adcode)
) {
_thisSelf.locationData.city =
result.regeocode.addressComponent.province;
} else {
_thisSelf.locationData.city =
result.regeocode.addressComponent.city;
}
// 提取 省 市 区 详细地址信息 重拼装省-市-区信息
_thisSelf.locationData.province =
result.regeocode.addressComponent.province;
_thisSelf.locationData.district =
result.regeocode.addressComponent.district;
_thisSelf.locationData.Address = result.regeocode.formattedAddress;
_thisSelf.locationData.nowPlace =
result.regeocode.addressComponent.province +
result.regeocode.addressComponent.city +
result.regeocode.addressComponent.district;
_thisSelf.userInfo.ProvinceName = _thisSelf.locationData.province;
_thisSelf.userInfo.CCityName = _thisSelf.locationData.city;
_thisSelf.userInfo.RegionName = _thisSelf.locationData.district;
} else {
console.log(_thisSelf.locationData); // 回调函数
}
});
});
}
},
created() {
this.getLocation();
}至此整个定位的实现全部结束，可以准确的获取到当前所在的省市区。
以上是“vue中如何实现高德定位功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
本文名称：vue中如何实现高德定位功能-创新互联
URL链接：http://myzitong.com/article/djpeoi.html