google-map-nearby

可以展示簡單的 Google Map，包含標點以及附近地標，點擊 Marker 展示地標資訊。

(基於 @react-google-maps/api 所建置)

Oneline Demo

Install

必要套件

• React v16.6 or later
• @react-google-maps/api

npm  install --save @react-google-maps/api
 # 或
yarn  add @react-google-maps/api

Install google-map-nearby

npm i google-map-nearby --save

PROPS & METHODS

至少需要給予 apiKey 以及 center 才能執行。

|Prop Name | Type | Default | Description | | -------- | -------- | -------- | -------- | | apiKey | string | | api key | | width | string | 100% | 地圖的寬度 | | height | string | 100vh | 地圖的高度 | | center | object | | 地圖中心點 (需要明確給予 lat 和 lng 的值, ex. {lat: [lat], lng: [lng]}) | | mainLat | number | | 主要的 Marker 緯度 | | mainLng | number | | 主要的 Marker 經度 | | defaultZoom | number | 16 | zoom 初始值 | | nearbyIcons | string | | 附近地標的 icon | | iconSize | object | { width: 40, height: 40 } | 附近地標 icon 的大小 | | nearbyData | object | | 附近地標的相關資料 | | lat | func | | 取得附近地標的緯度 | | lng | func | | 取得附近地標的經度 | | setCurrent | func | | 設置目前所點擊的地標資料 | | popup | node | | 彈跳窗內容 | | options | object | | 地圖樣式設定 | | labelText | func | | Label text | | labelStyle | string | | Marker label style | | labelZoom | number | 18 | 到達多少 zoom 值顯示 label | | isLoadScript | bool | true | 是否要加載 Script |

Usage

CSS

.map-label {
  font-weight: bold;
  margin-bottom: 60px;
}

React

  import React, { useState } from 'react'
  import Map from 'google-map-nearby'

  const GOOGLE_MAPS_API_KEY = 'API_KEY'
  const nearby = 
    [
      {
        "oid": 707,
        "cName": "鹿麻產車站",
        "pictureUrl": null,
        "positionLon": 120.5313720703,
        "positionLat": 23.5041694641
      },
      {
        "oid": 708,
        "cName": "鹿滿菸樓",
        "pictureUrl": null,
        "positionLon": 120.5315704346,
        "positionLat": 23.5040397644
      },
      {
        "oid": 714,
        "cName": "竹崎鹿滿客家文化園區",
        "pictureUrl": null,
        "positionLon": 120.5358428955,
        "positionLat": 23.5018291473
      },
      {
        "oid": 6265,
        "cName": "英和碗粿店",
        "pictureUrl": null,
        "positionLon": 120.5330963135,
        "positionLat": 23.4981594086
      },
      {
        "oid": 12048,
        "cName": "山合院休閒民宿",
        "pictureUrl": "https://taiwan.taiwanstay.net.tw/twpic/1063.jpg",
        "positionLon": 120.5333557129,
        "positionLat": 23.498714447
      }
    ];

  export default function Demo() {
    const [selectData, setSelectData] = useState({})
    const mapOptions = {
      styles: [
        {
          featureType: "poi",
          stylers: [
            {
              visibility: "off",
            },
          ],
        },
      ],
      mapTypeControl: false,
    }

    let Item = () => {
      return (
        <div>{selectData.cName}</div>
      )
    }
    
    return (
      <Map apiKey={GOOGLE_MAPS_API_KEY} center={{lat: 23.504, lng: 120.531 }} defaultZoom={16} mainLat={23.504} mainLng={120.531} 
        nearbyData={nearby} lat={(d) => d.positionLat} lng={(d) => d.positionLon} setCurrent={(data) => setSelectData(data)}
        nearbyIcons={"https://www.iconpacks.net/icons/2/free-location-pin-icon-2965-thumb.png"} iconSize={{ width: 40, height: 40 }}
        popup={<Item />} options={mapOptions}
        labelText={(d) => d.cName} labelStyle="map-label" labelZoom={18}
      />
    )
  }

版本更新

0.1.4

• 彈跳窗內容原本用 children 進行傳遞，更改成 popup 參數傳遞
• popup 加上 Close Button
• 可以自行傳入 MapOptions 對地圖進行調整

0.2.6

• Marker 可以顯示 Label，以及外部調整 label style
• 可以自行設置到達多少 zoom value 時顯示 label

0.2.8

• 加入 isLoadScript 參數判斷是否加載過 Script
• 移動地圖彈跳窗會自動關閉