vue中實(shí)現(xiàn)高德定位功能
一、獲取key及在index.htm中引入
首先需要成為高德開(kāi)發(fā)者,申請(qǐng)到適合項(xiàng)目的key.并在index.html中進(jìn)行引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></script>
二、在配置文件中進(jìn)行相應(yīng)配置
根據(jù)vue腳手架的不用需要在不同的文件中進(jìn)行配置。
我項(xiàng)目使用的是cli3的腳手架,需要在Vue.config.js中進(jìn)行高德地圖配置
externals: { 'AMap': 'AMap' // 高德地圖配置 }
三、在需要用到的地方進(jìn)行地圖初始化及定位操作
因項(xiàng)目需求只需要在注冊(cè)頁(yè)面進(jìn)行默認(rèn)定位,故只引用一次就行。并沒(méi)有單獨(dú)的抽離出來(lái),可以根據(jù)項(xiàng)目的需求進(jìn)行抽離。
import AMap from "AMap"; // 引入高德地圖 data() { // debugger return { locationData: { // 用于定位相關(guān)信息提交 lat: "", // 緯度 lon: "", // 經(jīng)度 province: "", // 省 city: "", // 市 district: "", // 區(qū) 縣 nowPlace: "", // 省-市-區(qū) Address: "" // 詳細(xì)地址 } }; }, methods:{ getLocation() { const self = this; AMap.plugin("AMap.Geolocation", function() { var geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位,默認(rèn):true timeout: 10000, // 超過(guò)10秒后停止定位,默認(rèn):無(wú)窮大 maximumAge: 0, // 定位結(jié)果緩存0毫秒,默認(rèn):0 convert: true // 自動(dòng)偏移坐標(biāo),偏移后的坐標(biāo)為高德坐標(biāo),默認(rèn):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 // 定位出錯(cuò) console.log("定位失敗錯(cuò)誤:", 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") { // 查詢(xún)成功,result即為當(dāng)前所在城市信息 console.log("通過(guò)ip獲取當(dāng)前城市:", result); //逆向地理編碼 AMap.plugin("AMap.Geocoder", function() { var geocoder = new AMap.Geocoder({ // city 指定進(jìn)行編碼查詢(xún)的城市,支持傳入城市名、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為對(duì)應(yīng)的地理位置詳細(xì)信息 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: "全國(guó)", // city 指定進(jìn)行編碼查詢(xún)的城市,支持傳入城市名、adcode 和 citycode radius: 100 // 以已知坐標(biāo)為中心點(diǎn),radius為半徑,返回范圍內(nèi)興趣點(diǎn)和道路信息 }); const lnglat = [longitude, latitude]; // 倒序反寫(xiě)經(jīng)緯度 // 天津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為對(duì)應(yīng)的地理位置詳細(xì)信息 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; } // 提取 省 市 區(qū) 詳細(xì)地址信息 重拼裝省-市-區(qū)信息 _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); // 回調(diào)函數(shù) } }); }); } }, created() { this.getLocation(); }
至此整個(gè)定位的實(shí)現(xiàn)全部結(jié)束,可以準(zhǔn)確的獲取到當(dāng)前所在的省市區(qū)。
總結(jié)
以上所述是小編給大家介紹的vue中實(shí)現(xiàn)高德定位功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- vue+openlayers繪制省市邊界線(xiàn)
- vue項(xiàng)目中openlayers繪制行政區(qū)劃
- vue-openlayers實(shí)現(xiàn)地圖坐標(biāo)彈框效果
- vue集成openlayers加載geojson并實(shí)現(xiàn)點(diǎn)擊彈窗教程
- Vue+Openlayers自定義軌跡動(dòng)畫(huà)
- vue使用openlayers實(shí)現(xiàn)移動(dòng)點(diǎn)動(dòng)畫(huà)
- vue+高德地圖實(shí)現(xiàn)地圖搜索及點(diǎn)擊定位操作
- vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼(踩坑經(jīng)驗(yàn))
- VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能
相關(guān)文章
vue實(shí)現(xiàn)點(diǎn)擊按鈕倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊按鈕倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07vue中element-ui組件默認(rèn)css樣式修改的四種方式
在前端項(xiàng)目中會(huì)運(yùn)用各種組件,有時(shí)組件的默認(rèn)樣式并不是你項(xiàng)目中所需要的,你需要更改樣式,下面這篇文章主要給大家介紹了關(guān)于vue中element-ui組件默認(rèn)css樣式修改的四種方式,需要的朋友可以參考下2021-10-10Element 的 el-table 表格實(shí)現(xiàn)單元格合并功能
這篇文章主要介紹了Element 的 el-table 表格實(shí)現(xiàn)單元格合并功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07Vue項(xiàng)目通過(guò)network的ip地址訪(fǎng)問(wèn)注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了Vue項(xiàng)目通過(guò)network的ip地址訪(fǎng)問(wèn)注意事項(xiàng)及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue使用計(jì)算屬性完成動(dòng)態(tài)滑竿條制作
這篇文章主要介紹了vue使用計(jì)算屬性完成動(dòng)態(tài)滑竿條制作,文章圍繞計(jì)vue算屬制作動(dòng)態(tài)滑竿條的相關(guān)代碼完成內(nèi)容,需要的朋友可以參考一下2021-12-12Element 默認(rèn)勾選表格 toggleRowSelection的實(shí)現(xiàn)
這篇文章主要介紹了Element 默認(rèn)勾選表格 toggleRowSelection的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09el-date-picker設(shè)置日期默認(rèn)值兩種方法(當(dāng)月月初至月末)
這篇文章主要給大家介紹了關(guān)于el-date-picker設(shè)置日期默認(rèn)值(當(dāng)月月初至月末)的相關(guān)資料,文中通過(guò)代碼示例將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08