vue移動端進入頁面獲取當前地理位置實現方法

2021-09-11 07:57:30 字數 1047 閱讀 9017

話不多說,直接寫方法步驟,需要的直接拿去放在自己專案中即可使用

先看下效果圖:

第一步:在專案中index.html檔案中引入高德地圖,如圖所示:

第二步:在專案中建立乙個js檔案,然後把下面的**全部拷貝進去

/**

* 高德地圖定位

* @type }

*/export const location = )

let geolocation;

mapobj.plugin(['amap.geolocation'], function () )

mapobj.addcontrol(geolocation)

geolocation.getcurrentposition()

})return geolocation;

}}

第三步:在需要用到的頁面引入你建立的這個js檔案(下面這是我的引入路徑可以替換成你的即可)

import  from "../../pages/utils/locationutil";
第四步:就是在你需要用到獲取當前地理位置的頁面呼叫方法。首先在methods方法中宣告方法,然後在mounted掛在後呼叫宣告的方法即可

methods: );

},} mounted()

以上就是頁面一進入彈出獲取當前地理位置的實現方法,有需要的拿走直接用。

這個步驟以及使用方法我寫的很清楚也很詳細,誰都能看懂的,所以小白操作,直接拷貝貼上即可。

以上文章還有些步驟需要更新,暫時沒有時間呢,改天弄通了從頭到尾重新梳理和整理一下再更新

喜歡博主的點關注,以後會多加更新問題和知識點!

大家相互學習,互相進步

Vue移動端呼叫高德獲取當前定位城市

1 申請key 注意 是web端 js api 2 在index.html中新增 注意 放到body上面 3 在webpack.base.conf.js中新增 externals 注意 在 model.exports 中新增 4 在需要獲取定位的頁面中新增 amap.plugin amap.city...

Vue實現移動端頁面切換效果

在子頁面把整個頁面做絕對定位,覆蓋整個螢幕,子父頁面將 router view 用 transition 套起來,並加上過渡動畫就可以啦。效果 有乙個問題需要注意一下,我們知道,在應用transform屬性的時候,fixed定位會變成absolute。這裡,頁面轉換的時候,就變成了相對transla...

vue 移動端專案切換頁面,頁面置頂

之前專案是pc端是使用router的方式實現置頂的 router.aftereach to,from,next 但是改了移動端就沒有效果了,稍微查了一下,好像說是要body裡才有用。可能與我使用了vux ui有關 在深究router方式還是找新方法的選擇上,我選了後者,自定義的common.js 這...