建立屬於你的 Google Map 地圖標記(一) - Google Map API 與 React


Posted by mumu892101 on 2022-08-08

手邊的專案暫時告一段落,是時候來整理一下專案中所需要的功能和處理方式了!
專案是一個可以讓商家在地圖上建立位置標記,然後透過標記連結可以看到詳細資料的社群平台,因此這一個系列要來紀錄如何實作這個功能:React 框架與 google-maps-apis 的串接,以及當中面臨需求時的處理方式。

簡單描述地圖標記區塊的功能:

在專案中的地圖標記區塊,我們會有一個可以輸入地址的 input 欄位,讓使用者輸入商家地址,接著可以點擊搜尋按鈕直接發送搜尋請求,或是直接透過 Google Maps API 的自動搜尋功能 Place Autocomplete 取得相近結果。帶有座標數值和 placeId 的結果,則將渲染標記於地圖上,並且可以透過拖曳或點擊改變標記位置,並重新反向透過新的座標資料取得更新位置後的 placeId。

因此這系列文章將紀錄開發中如何透過使用 google-map-react 這個套件,在 Google Maps API 串接的同時渲染 React 元件。實作過程中,也大量運用 React 中的 useRefuseState hooks 來操作資料與狀態判斷。接下來將會按照三大功能分類來介紹:

  1. 創立座標。
  2. 編輯座標。
  3. 呈現座標標記。

#React #GoogleMap #Google-Maps-APIs #google-map-react #React Hook







Related Posts

[Py 百日馬 Day 4-2] List 常見的使用方法

[Py 百日馬 Day 4-2] List 常見的使用方法

2048 專案

2048 專案

PHP會員管理系統 - 新增 & 修改 & 刪除

PHP會員管理系統 - 新增 & 修改 & 刪除


Comments