vue中如何实现高德定位功能

这篇文章主要介绍vue中如何实现高德定位功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

一、获取key及在index.htm中引入

首先需要成为高德开发者，申请到适合项目的key.并在index.html中进行引入

<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></script>

二、在配置文件中进行相应配置

根据vue脚手架的不用需要在不同的文件中进行配置。

我项目使用的是cli3的脚手架，需要在Vue.config.js中进行高德地图配置

externals:{
'AMap':'AMap'//高德地图配置
}

三、在需要用到的地方进行地图初始化及定位操作

因项目需求只需要在注册页面进行默认定位，故只引用一次就行。并没有单独的抽离出来，可以根据项目的需求进行抽离。

importAMapfrom"AMap";//引入高德地图

data(){
//debugger
return{
locationData:{
//用于定位相关信息提交
lat:"",//纬度
lon:"",//经度
province:"",//省
city:"",//市
district:"",//区县
nowPlace:"",//省-市-区
Address:""//详细地址
}
};
},
methods:{
getLocation(){
constself=this;
AMap.plugin("AMap.Geolocation",function(){
vargeolocation=newAMap.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);

functiononComplete(data){
//data是具体的定位信息
//debugger
console.log("定位成功信息：",data);
self.newGetAddress(data.position.lat,data.position.lng);
}

functiononError(data){
//debugger
//定位出错
console.log("定位失败错误：",data);
self.getLngLatLocation();
}
});
},
getLngLatLocation(){
constself=this;
AMap.plugin("AMap.CitySearch",function(){
varcitySearch=newAMap.CitySearch();
citySearch.getLocalCity(function(status,result){
if(status==="complete"&&result.info==="OK"){
//查询成功，result即为当前所在城市信息
console.log("通过ip获取当前城市：",result);
//逆向地理编码
AMap.plugin("AMap.Geocoder",function(){
vargeocoder=newAMap.Geocoder({
//city指定进行编码查询的城市，支持传入城市名、adcode和citycode
city:result.adcode
});

varlnglat=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;
constmapObj=newAMap.Map("mapAmap1");
mapObj.plugin("AMap.Geocoder",function(){
constgeocoder=newAMap.Geocoder({
city:"全国",//city指定进行编码查询的城市，支持传入城市名、adcode和citycode
radius:100//以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
});
constlnglat=[longitude,latitude];//倒序反写经纬度
//天津120北京110上海310重庆500,
constreg1=/^[1][1][0][0-9][0-9][0-9]/;
constreg2=/^[1][2][0][0-9][0-9][0-9]/;
constreg3=/^[5][0][0][0-9][0-9][0-9]/;
constreg4=/^[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为对应的地理位置详细信息
constadcode=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中如何实现高德定位功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！