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 states = reactive({
      google: null,
      map: null,
      markers: null,
    });
    const initMap = async () => {
      const loader = new Loader({
        apiKey: process.env.VUE_APP_GOOGLE_MAP_API_KEY,
        version: "weekly",
        libraries: ["places"],
        language: "zh-TW",
      });
      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囉！

---

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

首先假設你有一份經緯度的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就很大了，最好不要超過。