vue中实现高德定位功能
一、获取key及在index.htm中引入
首先需要成为高德开发者，申请到适合项目的key.并在index.html中进行引入
二、在配置文件中进行相应配置
根据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中实现高德定位功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。