หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Google Map React ·

google-map-react เป็นองค์ประกอบที่เขียนบนชุดเล็กๆ ของ Google Maps API ช่วยให้คุณสามารถเรนเดอร์ส่วนประกอบ React บน Google Map มันเป็น isomorphic อย่างสมบูรณ์และสามารถเรนเดอร์บนเซิร์ฟเวอร์ได้ นอกจากนี้ยังสามารถแสดงส่วนประกอบแผนที่ในเบราว์เซอร์ได้แม้ว่าจะไม่ได้โหลด Google Maps API ก็ตาม ใช้อัลกอริธึมการโฮเวอร์ภายในที่ปรับแต่งได้ - ทุกๆ วัตถุบนแผนที่สามารถโฮเวอร์ได้

ช่วยให้คุณสร้างอินเทอร์เฟซเหมือนตัวอย่างนี้ (คุณสามารถเลื่อนตาราง ซูม/ย้ายแผนที่ โฮเวอร์/คลิกบนเครื่องหมาย และคลิกที่แถวของตาราง)

เริ่มต้นใช้งาน

ในกรณีง่ายๆ คุณเพียงแค่ต้องเพิ่มอุปกรณ์ประกอบ lat และ lng ให้กับลูกของส่วนประกอบ GoogleMapReact

ดูการทำงานจริงได้ที่ jsbin 

 import React from "react" ;
import GoogleMapReact from 'google-map-react' ;

const AnyReactComponent = ( { text } ) => < div > { text } < / div > ;

export default function SimpleMap ( ) {
  const defaultProps = {
    center : {
      lat : 10.99835602 ,
      lng : 77.01502627
    } ,
    zoom : 11
  } ;

  return (
    // Important! Always set the container height explicitly
    < div style = { { height : '100vh' , width : '100%' } } >
      < GoogleMapReact
        bootstrapURLKeys = { { key : "" } }
        defaultCenter = { defaultProps . center }
        defaultZoom = { defaultProps . zoom }
      >
        < AnyReactComponent
          lat = { 59.955413 }
          lng = { 30.337844 }
          text = "My Marker"
        / >
      < / GoogleMapReact >
    < / div >
  ) ;
}

แผนที่ของฉันไม่ปรากฏ!

  • ตรวจสอบให้แน่ใจว่าองค์ประกอบคอนเทนเนอร์มีความกว้างและความสูง แผนที่จะพยายามเติมคอนเทนเนอร์หลัก แต่ถ้าคอนเทนเนอร์ไม่มีขนาด แผนที่จะยุบเป็น 0 ความกว้าง/ความสูง นี่ไม่ใช่ข้อกำหนดสำหรับ google-map-react แต่เป็นข้อกำหนดสำหรับ google-maps โดยทั่วไป

การติดตั้ง

เวลา 12.00 น.: 

 npm install --save google-map-react

เส้นด้าย: 

 yarn add google-map-react

คุณสมบัติ

ทำงานร่วมกับส่วนประกอบของคุณ

แทนที่จะใช้มาร์กเกอร์ ลูกโป่ง และส่วนประกอบแผนที่อื่นๆ ของ Google Maps เริ่มต้น คุณสามารถแสดงส่วนประกอบโต้ตอบแบบเคลื่อนไหวสุดเจ๋งของคุณบนแผนที่ได้

การเรนเดอร์แบบไอโซมอร์ฟิก

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

ตำแหน่งส่วนประกอบคำนวณโดยอิสระจาก Google Maps API

โดยแสดงส่วนประกอบต่างๆ บนแผนที่ก่อน (และแม้กระทั่งไม่มี) โหลด Google Maps API

Google Maps API โหลดได้ตามความต้องการ

ไม่จำเป็นต้องวางแท็ก <script src= ที่ด้านบนของหน้า Google Maps API จะโหลดเมื่อมีการใช้งานครั้งแรกของส่วนประกอบ GoogleMapReact

ใช้ Google แผนที่ API

คุณสามารถเข้าถึงวัตถุ map และ maps ของ Google Maps ได้โดยใช้ onGoogleApiLoaded ในกรณีนี้คุณจะต้องตั้งค่า yesIWantToUseGoogleMapApiInternals ให้เป็น true 

...

const handleApiLoaded = ( map , maps ) => {
  // use map and maps objects
} ;

...

< GoogleMapReact
  bootstrapURLKeys = { { key : /* YOUR KEY HERE */ } }
  defaultCenter = { this . props . center }
  defaultZoom = { this . props . zoom }
  yesIWantToUseGoogleMapApiInternals
  onGoogleApiLoaded = { ( { map , maps } ) => handleApiLoaded ( map , maps ) }
>
  < AnyReactComponent
    lat = { 59.955413 }
    lng = { 30.337844 }
    text = "My Marker"
  / >
< / GoogleMapReact >

PST: อย่าลืมตั้งค่า yesIWantToUseGoogleMapApiInternals ให้เป็นจริง

ตัวอย่างที่นี่

อัลกอริธึมโฮเวอร์ภายใน

ตอนนี้ทุกวัตถุบนแผนที่สามารถโฮเวอร์ได้ (อย่างไรก็ตาม คุณยังคงสามารถใช้ตัวเลือก css hover ได้หากต้องการ) หากคุณลองซูมออกที่นี่ คุณจะยังคงสามารถวางเมาส์เหนือเครื่องหมายบนแผนที่ได้เกือบทุกตัว

ตัวอย่าง

  • การวางส่วนประกอบปฏิกิริยาบนแผนที่: ง่าย ((ที่มา ))

  • ตัวเลือกแผนที่ที่กำหนดเอง: ตัวอย่าง (ที่มา)

  • เอฟเฟกต์โฮเวอร์: โฮเวอร์ธรรมดา (ที่มา); การเลื่อนระยะทาง (ที่มา)

  • กิจกรรม GoogleMap: ตัวอย่าง (ที่มา)

  • โครงการตัวอย่าง: main (ที่มา); balderdash (แหล่งเดียวกับหลัก)

  • ตัวอย่างการจัดกลุ่มโดยใช้ Hooks ( ใหม่ : แหล่งที่มา บทความ) การทำคลัสเตอร์ด้วย hooks

  • ตัวอย่างการจัดกลุ่ม (ที่มา) google-map-clustering-example

  • วิธีแสดงเครื่องหมายนับพัน ( ใหม่ : แหล่งที่มา) google-map-thousands-markers

  • ตัวอย่าง: ตัวอย่าง ตัวอย่างเก่า

  • ตัวอย่าง jsbin ตัวอย่าง jsbin

  • ตัวอย่าง webpackbin ( ใหม่ ) เอกสารพร้อมตัวอย่าง webpackbin (กำลังดำเนินการ)

  • ตัวอย่างการพัฒนาท้องถิ่น (ใหม่) ตัวอย่างการพัฒนา

เอกสารประกอบ

คุณสามารถค้นหาเอกสารได้ที่นี่:

  • การอ้างอิง API

  • เอกสารใหม่ (อยู่ระหว่างดำเนินการ)

มีส่วนช่วย

การพัฒนาท้องถิ่นแบ่งออกเป็นสองส่วน (ควรใช้สองแท็บ)

ขั้นแรก ให้รัน rollup เพื่อดู src/ module ของคุณ และคอมไพล์ใหม่เป็น dist/ โดยอัตโนมัติทุกครั้งที่คุณทำการเปลี่ยนแปลง 

npm start # runs rollup with watch flag

ส่วนที่สองจะเรียกใช้ example/ create-react-app ที่เชื่อมโยงกับโมดูลเวอร์ชันท้องถิ่นของคุณ 

 # (in another tab)
cd example
npm start # runs create-react-app dev server

ในตอนนี้ เมื่อใดก็ตามที่คุณทำการเปลี่ยนแปลงไลบรารี่ของคุณใน src/ หรือต่อตัวอย่างแอป example/src แอป create-react-app จะรีโหลดเซิร์ฟเวอร์ dev ในพื้นที่ของคุณ เพื่อให้คุณสามารถวนซ้ำส่วนประกอบของคุณได้แบบเรียลไทม์

ลิงค์ติดตั้งด้วยตนเอง

หากคุณได้รับข้อผิดพลาด Module not found: Can't resolve 'google-react-map'... ในขณะที่พยายามเรียกใช้แอปตัวอย่าง คุณจะต้องเชื่อมโยงโมดูลการพัฒนาในเครื่องของคุณด้วยตนเอง ลองทำตามขั้นตอนต่อไปนี้:

  1. ในโฟลเดอร์รูท: 
npm link
  1. ไปที่ example/ และ (หลังจากติดตั้งการพึ่งพาอื่น ๆ ) ดำเนินการ: 
npm link google-map-react

ใบอนุญาต

เอ็มไอที

ปัญหาที่ทราบ

  • เบราว์เซอร์รุ่นเก่า (http://caniuse.com/#feat=promises) จะต้องมี ES6 Promise polyfill จึงจะทำงานได้

- เรากำลังมองหาผู้มีส่วนร่วม

เรากำลังมองหาผู้มีส่วนร่วม โปรดส่งข้อความถึงเจ้าของหรือผู้ทำงานร่วมกัน

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด