建立屬於你的 Google Map 地圖標記(二) - 渲染自定參數的地圖元件

地圖元件設置

在開發的一開始，首先需要先申請屬於你的 Google Maps API Key，接著我們必須建立一個指定長寬的父層，子層則是地圖元件，地圖元件會填充父層尺寸。這個設定在 google-map-react 中有提及，並且表示這個限制是來自於 Google-Map 所提供的。

<div className="w-full h-60 sm:h-96 mt-7 relative">
  <GoogleMapReact
    bootstrapURLKeys={{
      key: MAP_KEY,
      libraries: ['Maps javascript', 'places']
    }}
    center={coordsResult || initPosition || defaultCenter}
    defaultZoom={18}
    yesIWantToUseGoogleMapApiInternals={true}
    onGoogleApiLoaded={({ map, maps }) => apiHasLoaded(map, maps)}
    onChange={handleCenterChange}
  />
</div>

地圖元件參數設定

GoogleMapReact 這個 component 可以視為地圖本身，關於這個 component 的參數及用法，可以參考 google-map-react 的官方文件：https://www.npmjs.com/package/google-map-react ，以下介紹一下專案用到的參數有：

bootstrapURLKeys :
可以放置 Google Map Key 以及語言地區設定，另外 libraries 陣列中則是放置專案需要並且已啟用 Google Map API。

<GoogleMap
  bootstrapURLKeys={{
    key: API_KEY, // API Key
    language: 'ru', 
    region: 'ru',
    libraries:['places'], // 已啟用 Google Map API
    ...otherUrlParams,
  }}
>

center :
指打開地圖首先會呈現的地圖中心點，另外有 defaultCenter 這個參數，但更改會收到 warning。因為之後會用到定位的功能，當使用者同意定位時，中心點會以使用者所在位置呈現，如果不同意時則以自定義的固定中心點呈現，因此這邊使用 center 參數。

defaultZoom :
為打開地圖首先會呈現的地圖縮放比例。

yesIWantToUseGoogleMapApiInternals :
要使用這個套件載入 Google Map API 則需要設置為 true ，表示可以存取 google 地圖及物件。

onGoogleApiLoaded :
這個參數帶入一個 function 執行 Google Map API 初始載入後需要的行為。

onGoogleApiLoaded={({ map, maps }) => apiHasLoaded(map, maps)}

map 和 maps 參數都是物件， map 就是地圖元件，maps 則是 Google Map API。當要在地圖元件上移動中心點或渲染標記，需要調用 map，而需要查詢座標、placeId 或自動提供地址選項等功能需要使用 API 時，則調用 maps。而這個 function 的內容，則是透過 react hooks 將 map 和 maps 存於 state 中並調用。

onChange :
在這邊透過 onChange 帶入指定 function，該行為是當滑鼠點擊拖曳地圖時，調整地圖的中心點座標。

地圖元件細節設定

透過這個設定，已經可以呈現出地圖的元件，如果想要做一些其他設定，可以在 onGoogleApiLoaded 中的 function 去針對地圖載入後的元件設定其他參數：

  const apiHasLoaded = useCallback((map, maps) => {
    map.setOptions({
      gestureHandling: 'cooperative',
      maxZoom: 18
    })
    setMapInstance(map)
    setMapApi(maps)
    setMapApiLoaded(true)
  }, [])

因為專案需要同時符合桌機和移動裝置需求，因此在手勢的設定上有進行調整：
gestureHandling : 設定為 cooperative，是讓使用移動裝置的用戶在單指點擊地圖時，希望觸發的是放置地圖標記的功能，而不是縮放功能，在這個設定下，移動裝置用戶僅能使用雙指縮放地圖。
maxZoom : 最大可縮放比例，因應專案是放置地圖在表單中，尺寸範圍有限，因此只能縮小讓地圖移動時可以迅速轉換地區，透過 maxZoom 和 defaultZoom 設定相同數值，則不允許用戶進行地圖放大。

定位使用者位置

取得使用者當前位置的方式，並不是透過 Google Map API，而是透過 Web Geolocation API 取得當前裝備的位置，文件可以參考 https://developer.mozilla.org/zh-TW/docs/Web/API/Geolocation/getCurrentPosition 。
前兩個參數分別是 success 和 error 的 callback，如果成功拿到 position 則將回傳資料存於 state 中，讓 GoogleMapReact component 中的 center 參數可以取得該座標。

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        setInitPosition({
          lat: position.coords.latitude,
          lng: position.coords.longitude
        })
      },
      () => {
        console.log('無法顯示或拒絕定位')
        setInitPosition(defaultCenter)
      }
    )
  }, [])