vue3 使用 google map api

很許多api一樣,要使用的話要先創建帳號。

準備項目:

  1. 創建一個gcp帳號,並且建立一個專案project。
  2. 啟用google map api產生google map api key
  3. 創建一個vue3專案

安裝套件

在vue專案中安裝@googlemaps/js-api-loader

$ yarn add @googlemaps/js-api-loader

 

頁面使用

必須在.vue檔案中

 <div id="map"></div>
import { Loader } from "@googlemaps/js-api-loader";
setup() {
    const initMap = async () => {
      const loader = new Loader({
        apiKey: process.env.VUE_APP_GOOGLE_MAP_API_KEY,
        version: "weekly",
        libraries: ["places"],
      });
      states.google = await loader.load();
      states.map = new states.google.maps.Map(document.getElementById("map"), {
        center: { lat: 25.0425, lng: 121.5468 },
        zoom: 11,
        mapTypeControl: false,
        fullscreenControl: false,
      });
    };
}

可以看到我們先創建Loader實例,並且要把對應的參數帶進去,最基本要帶的就是apikey

創建好之後起始化await loader.load(),因為其他地方都會用到,所以建立一個state存起來。

接下來要把google map放到網頁中的位置,可以指定中心經緯度、縮放程度…等。

這時候在onMounted裡去建立:

onMounted(async () => {
  await initMap();
});

畫面中就可以看到google map囉!

google map

在地圖上標註多個特定地點

首先假設你有一份經緯度的json檔(用json是因為js比較好處理)

[
  { "id": 1, "lat": 25.0425, "lng": 121.5468 },
  { "id": 2, "lat": 25.1023, "lng": 121.3321 },
  { "id": 3, "lat": 25.1123, "lng": 121.3221 },
  { "id": 4, "lat": 25.0423, "lng": 121.54271 },
  { "id": 5, "lat": 25.1423, "lng": 121.522 },
  { "id": 6, "lat": 25.1623, "lng": 121.4922 },
  { "id": 7, "lat": 25.0013, "lng": 121.5122 },
  { "id": 7, "lat": 25.0001, "lng": 121.5091 },
  { "id": 8, "lat": 25.1283, "lng": 121.5471 }
]

先將這份json檔匯入剛剛地圖所在的頁面:

import markersData from '../markersData.json';

呼叫Marger api:

const handleLoadMarkers = async () => {
      markersData.forEach(i => {
        new states.google.maps.Marker({
          position: { lat: i.lat, lng: i.lng },
          map: states.map,
          draggable: true,
          icon: {
            url: hartImg,
            size: new states.google.maps.Size(30, 30),
            scaledSize: new states.google.maps.Size(30, 30),
          },
        });
      });
};
onMounted(async () => {
//...
      handleLoadMarkers();
});

傳入的參數:

  • position:就是json檔案中每個項目的經緯度。
  • map:指定剛剛在onMounted創建的地圖實例,當然你也可以放很多個地圖,然後指定是要哪個地圖。
  • draggable:要潮就是要可以拖動啊!
  • icon:在地圖上,如果不喜歡google map預設的紅色地標圖,可以放自己的圖案,尺寸30×30就很大了,最好不要超過。
google map 標記多個地標

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。