天天看點

NUXT.JS架構引入 騰訊地圖--點選門店并且切換地圖的中心點

一、首先在nuxt.config.js檔案中引入騰訊地圖并加上自己的申請的key.

NUXT.JS架構引入 騰訊地圖--點選門店并且切換地圖的中心點

 二、然後那個頁面使用到地圖的時候,就在那個頁面的methods中封裝初始化地圖。

taps:如果多次調用和使用的話建議在data中注冊map對象 ,初始值為null。

NUXT.JS架構引入 騰訊地圖--點選門店并且切換地圖的中心點

設定放置地圖容器的DOM節點的id="container"

 center是預設中心點坐标,也可以擷取個人位置的經緯度然後設定成中心點。

zoom是地圖縮放的級别。

三 、然後再mounted鈎子函數中調用初始化地圖的函數:

NUXT.JS架構引入 騰訊地圖--點選門店并且切換地圖的中心點

 這時候都能在螢幕上看到地圖了!!

四、  想要靈活更改地圖的中心點的同學看這裡

更改地圖的中心點坐标的話,需要将目前門店的經緯度傳遞過來,最最重要的一點是要使用騰訊地圖的setCenter的方法,因為在上方已經在頁面注冊了map 的執行個體是以可以直接使用。

NUXT.JS架構引入 騰訊地圖--點選門店并且切換地圖的中心點

item為你傳遞過來的經緯度資訊。判斷當傳入的坐标為0的時候顯示預設的經緯度來目前做中心點。否則地圖會變成白屏哦!!!

繼續閱讀