npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

google-map-nearby

v0.2.8

Published

Mark nearby landmarks

Downloads

5

Readme

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
  • 移動地圖彈跳窗會自動關閉