react gmaps utils

React-gmaps-utils

React-Gmaps-Utils เป็นไลบรารี React ที่ให้ส่วนประกอบและตะขอสำหรับการรวมฟังก์ชันการทำงานของ Google Maps ลงในแอปพลิเคชัน React ของคุณ

การติดตั้ง

คุณสามารถติดตั้ง React-gmaps-utils โดยใช้ NPM:

npm install react-gmaps-utils
npm install --save-dev @types/google.maps

การใช้งาน

googlemapsprovider

ส่วนประกอบ GoogleMapsProvider ใช้สำหรับโหลดสคริปต์ Google Maps และจัดทำบริบทสำหรับส่วนประกอบอื่น ๆ เพื่อเข้าถึง Google Maps API

 import { GoogleMapsProvider } from 'react-gmaps-utils'

function App ( ) {
  return (
    < GoogleMapsProvider apiKey = 'YOUR_API_KEY' >
      { /* Your application components */ }
    </ GoogleMapsProvider >
  )
}

แผนที่

ส่วนประกอบ Map แสดงแผนที่ Google และมีตัวเลือกต่าง ๆ สำหรับการปรับแต่ง

 import { Map } from 'react-gmaps-utils'

function MyMap ( ) {
  return (
    < Map
      options = { {
        center : { lat : 37.7749 , lng : - 122.4194 } ,
        zoom : 10
      } }
    >
      { /* Optional child components */ }
    </ Map >
  )
}

เครื่องทำเครื่องหมาย

ส่วนประกอบ Marker เพิ่มเครื่องหมายลงในแผนที่ที่ตำแหน่งที่ระบุ

 import { Map } from 'react-gmaps-utils'

function MyMapWithMarker ( ) {
  return (
    < Map
      options = { {
        center : { lat : 37.7749 , lng : - 122.4194 } ,
        zoom : 10
      } }
    >
      < Map . Marker position = { { lat : 37.7749 , lng : - 122.4194 } } />
    </ Map >
  )
}

การกรองอัตโนมัติ

ส่วนประกอบ Autocomplete ให้ฟิลด์อินพุตที่มีฟังก์ชั่นการเติมข้อความอัตโนมัติสำหรับสถานที่

 import { Places , Autocomplete } from 'react-gmaps-utils'
import { useMemo , useRef , useState } from 'react'

function MyAutocomplete ( ) {
  const [ query , setQuery ] = useState ( '' )
  const autocompleteRef = useRef < { close : ( ) => void } > ( null )
  const placesService = useRef < google . maps . places . PlacesService | null > ( null )
  const [ placeId , setPlaceId ] = useState < string | null > ( null ) ;
  return (
    < Places
      onLoaded = { ( places ) => {
        placesService . current = places
      } }
    >
      < Autocomplete
        as = { CustomInput }
        ref = { autocompleteRef }
        value = { query }
        onChange = { ( e : React . ChangeEvent < HTMLInputElement > ) =>
          setQuery ( e . target . value )
        }
        options = { { types : [ '(cities)' ] } }
        className = 'input'
        renderResult = { ( predictions ) => {
          return (
            < div className = 'dropdown' >
              { predictions . map ( ( prediction ) => (
                < div
                  className = 'dropdown-item'
                  key = { prediction . place_id }
                  onClick = { ( ) => {
                    setPlaceId ( prediction . place_id )
                    autocompleteRef . current ?. close ( )
                  } }
                >
                  < span > { prediction . description } </ span >
                </ div >
              ) ) }
            </ div >
          )
        } }
      />
      < Places . FindPlaceByPlaceId placeId = { placeId } onPlaceReceived = { ( place ) => { console . log ( place ?. geometry ?. location ?. toJSON ( ) ) } } />
    </ Places >
  )
}

ส่วนประกอบยัง shouldFetch ซึ่งเป็นบูลีนที่คุณสามารถผ่านเพื่อป้องกันการเติมคำแนะนำอัตโนมัติจากการดึงคำแนะนำ ตัวอย่าง USECASE อาจเป็นได้หากคุณต้องการให้การดึงข้อมูลเกิดขึ้นก็ต่อเมื่อมีการโต้ตอบของผู้ใช้

reverseGeocodebyLocation

ส่วนประกอบ ReverseGeocodeByLocation ดำเนินการย้อนกลับทางภูมิศาสตร์ตามตำแหน่งที่ระบุ

 import { ReverseGeocodeByLocation } from 'react-gmaps-utils'

function MyReverseGeocoder ( ) {
  return (
    < ReverseGeocodeByLocation
      position = { { lat : 37.7749 , lng : - 122.4194 } }
      onAddressReceived = { ( result ) => console . log ( result ) }
    />
  )
}

MAPEVENT

ส่วนประกอบ MapEvent รับฟังเหตุการณ์บนแผนที่และเรียกใช้ฟังก์ชันการโทรกลับเมื่อเหตุการณ์ถูกเรียกใช้

 import { MapEvent } from 'react-gmaps-utils'

function MyMapEvent ( ) {
  const handleMapClick = ( map , event ) => {
    console . log ( 'Map clicked at:' , event . latLng . lat ( ) , event . latLng . lng ( ) )
  }

  return (
    < Map
      options = { {
        center : { lat : 37.7749 , lng : - 122.4194 } ,
        zoom : 10
      } }
    >
      < Map . Event event = 'click' callback = { handleMapClick } />
    </ Map >
  )
} 

ตะขอที่กำหนดเอง

usecurrentposition

Hook useCurrentPosition ดึงตำแหน่งปัจจุบันของผู้ใช้

 import { useCurrentPosition } from 'react-gmaps-utils'

function MyComponent ( ) {
  const { position , loading , error , getCurrentPosition , getIPBasedPosition } = useCurrentPosition ( {
    onInit : {
      getPosition : true ,
      ipBased : true ,
    }
  } )

  if ( loading ) return < div > Loading... </ div >
  if ( error ) return < div > Error: { error } </ div >

  return (
    < div >
      Latitude: { position ?. lat }
      < br />
      Longitude: { position ?. lng }
      < br />
      < button onClick = { getCurrentPosition } > Get Exact Location </ button >
    </ div >
  )
} 

บันทึก

ไลบรารีนี้ต้องการคีย์ API จาก Google Maps ตรวจสอบให้แน่ใจว่าได้แทนที่ "YOUR_API_KEY" ด้วยคีย์ API จริงของคุณในส่วนประกอบ GoogleMapsProvider

ใบอนุญาต

MIT © Abdelrahman146