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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。