การรวมแผนที่เข้ากับเว็บแอปพลิเคชันสมัยใหม่ได้กลายเป็นส่วนสำคัญในการสร้างประสบการณ์ผู้ใช้ที่น่าดึงดูดและคำนึงถึงสถานที่ ด้วยการถือกำเนิดของ React และไลบรารีเช่น @react-google-maps/api นักพัฒนาจึงสามารถฝังแผนที่เชิงโต้ตอบภายในแอปพลิเคชันของตนได้อย่างง่ายดาย ในคู่มือที่ครอบคลุมนี้ เราจะแนะนำคุณในทุกขั้นตอน ตั้งแต่การตั้งค่าการเชื่อมต่อ Google Cloud ไปจนถึงการใช้ตำแหน่งทางภูมิศาสตร์ ไปจนถึงการสร้างแผนที่ที่น่าทึ่งในโปรเจ็กต์ React ของคุณ
ส่วนที่ 1: การตั้งค่าการเชื่อมต่อ Google Cloud ของคุณ
- ไปที่เว็บไซต์ Google Cloud Platform เพื่อเริ่มต้น ผู้ใช้ใหม่ควรลงทะเบียน ไม่ต้องกังวลกับคำขอบัตรเครดิต — ระดับฟรีของ Google ให้การเข้าถึงบริการต่างๆ เช่น Google Maps API
- เข้าสู่ “เปิดใช้งานบัญชีเต็ม”
- ไปที่เมนู > แพลตฟอร์ม Google Maps > กุญแจและข้อมูลประจำตัว
- คัดลอกคีย์และบันทึก
ส่วนที่ 2: การเริ่มต้นโครงการ React ของคุณและการติดตั้งการพึ่งพา
เมื่อคุณได้รักษาความปลอดภัยคีย์ Google Cloud API แล้ว ก็ถึงเวลาตั้งค่าโปรเจ็กต์ React และรวมไลบรารีที่จำเป็นสำหรับการสร้างแผนที่เชิงโต้ตอบโดยใช้ @react-google-maps/api ทำตามขั้นตอนเหล่านี้เพื่อเริ่มต้น:
ขั้นตอนที่ 1: สร้างแอปโต้ตอบใหม่:
หากคุณยังไม่มี ตรวจสอบให้แน่ใจว่าคุณมี Node.js และ npm (Node Package Manager) ติดตั้งบนระบบของคุณ เปิดเทอร์มินัลของคุณและรันคำสั่งต่อไปนี้เพื่อสร้างแอป React ใหม่:
npm create vite@latest
ขั้นตอนที่ 2: ติดตั้ง @react-google-maps/api
npm install @react-google-maps/api
ตอนนี้เปิดส่วนประกอบใหม่สำหรับไฟล์แผนที่และ css
ขั้นตอนที่ 3: นำเข้า
import { GoogleMap, MarkerF, useLoadScript } from '@react-google-maps/api'; import './google-map.css' const center = { lat: -3.745, lng: -38.523 };
วัตถุ center
กำหนดจุดโฟกัสของแผนที่ ในภายหลัง เราจะสำรวจวิธีการตั้งค่าศูนย์นี้แบบไดนามิกโดยใช้ตำแหน่งของอุปกรณ์ของคุณ
ส่วนที่ 3: การแสดงแผนที่แรกของคุณ
ขั้นตอนที่ 1: กำหนดฟังก์ชัน Map
สร้างฟังก์ชันแยกต่างหากที่เรียกว่า Map
เพื่อสรุปลอจิกการเรนเดอร์แผนที่ ฟังก์ชันนี้จะมีส่วนประกอบ <GoogleMap>
และส่วนประกอบ <MarkerF>
function Map() { return ( <GoogleMap zoom={16} center={center} mapContainerClassName="map-container"> <MarkerF onClick={() => console.log("my location")} position={center} /> </GoogleMap> ); }
ขั้นตอนที่ 2: กำหนดฟังก์ชัน GoogleMapExample
สร้างฟังก์ชัน GoogleMapExample
ซึ่งทำหน้าที่เป็นส่วนประกอบหลักของคุณ ภายในฟังก์ชันนี้ ให้ใช้ฮุก useLoadScript
เพื่อโหลด Google Maps API หากโหลด API แล้ว (isLoaded
เป็นจริง) ให้เรนเดอร์ส่วนประกอบ Map
หากไม่ได้โหลด API ให้แสดงข้อความกำลังโหลด
function GoogleMapExample() { const { isLoaded } = useLoadScript({ googleMapsApiKey: "YOUR_API_KEY", }); if (!isLoaded) return <div>Loading...</div>; return ( <div> <div> <Map /> </div> </div> ); } export default GoogleMapExample
ขั้นตอนที่ 3: CSS
ในไฟล์ CSS ของคุณ (เช่น google-map.css
) ให้เพิ่มโค้ดต่อไปนี้เพื่อกำหนดขนาดของคอนเทนเนอร์แผนที่:
.map-container { height: 60vh; /* Adjust the height as needed */ }
อย่าลืมเชื่อมโยงไฟล์ CSS นี้ใน HTML ของคุณหรือรวมไว้ในองค์ประกอบ React ของคุณหากคุณใช้ CSS-in-JS หรือแนวทางที่คล้ายกัน
และตอนนี้แผนที่ของคุณก็พร้อมใช้งานแล้ว!
ส่วนที่ 4: การเปลี่ยนไอคอนเครื่องหมาย:
การปรับปรุงความสวยงามและความชัดเจนของแผนที่ของคุณเกี่ยวข้องกับการปรับแต่งเครื่องหมายให้เหมาะกับธีมของแอปพลิเคชันของคุณ ในส่วนนี้ เราจะแนะนำคุณตลอดขั้นตอนการเปลี่ยนไอคอนเครื่องหมายเริ่มต้นให้สะดุดตายิ่งขึ้น มาเริ่มกันเลย:
ขั้นตอนที่ 1: เลือกไอคอน
นำทางไปยังแหล่งที่มีชื่อเสียงสำหรับไอคอน เช่น Icon8 (https://www.icon8.com/) และค้นหาไอคอนที่โดนใจ บริบทของแอปของคุณ เมื่อคุณพบไอคอนที่สมบูรณ์แบบแล้ว ให้ดาวน์โหลดลงในคอมพิวเตอร์ของคุณ
ขั้นตอนที่ 2: เพิ่มไอคอนในโครงการของคุณ
ภายในไดเร็กทอรีของโปรเจ็กต์ของคุณ ให้สร้างโฟลเดอร์ชื่อ icons
หรือชื่อที่เกี่ยวข้องเพื่อจัดระเบียบไอคอนที่คุณกำหนดเอง ย้ายไฟล์ไอคอนที่ดาวน์โหลดมาลงในโฟลเดอร์นี้
ขั้นตอนที่ 3: นำเข้าไอคอน
ในไฟล์ส่วนประกอบ React ที่คุณใช้ส่วนประกอบ MarkerF
ให้นำเข้าไอคอนที่กำหนดเอง สมมติว่าไฟล์ไอคอนแบบกำหนดเองของคุณชื่อ custom-icon.png
และอยู่ในโฟลเดอร์ icons
การนำเข้าจะมีลักษณะดังนี้:
import customIcon from './icons/custom-icon.png'; // Update the path as needed
ขั้นตอนที่ 4: ปรับแต่งขนาดไอคอน
ในออบเจ็กต์ icon
ภายในองค์ประกอบ MarkerF
คุณสามารถปรับคุณสมบัติ scaledSize
เพื่อกำหนดขนาดไอคอนที่คุณกำหนดเองได้ตามต้องการ
<MarkerF onClick={() => console.log("my location")} position={center} icon={{ url: customIcon, scaledSize: new window.google.maps.Size(30, 30) // Adjust the size as needed }} />
ส่วนที่ 5: การวางศูนย์กลางแผนที่แบบไดนามิกด้วยตำแหน่งทางภูมิศาสตร์
การเปิดใช้งานแผนที่ของคุณให้มีศูนย์กลางแบบไดนามิกตามตำแหน่งของผู้ใช้จะช่วยเพิ่มความเป็นส่วนตัวให้กับแอปพลิเคชันของคุณ ในส่วนนี้ เราจะแนะนำคุณตลอดการใช้งานฟังก์ชันการจัดศูนย์กลางแบบไดนามิกนี้โดยใช้ Geolocation API มาดำดิ่งกันใน:
ขั้นตอนที่ 1: นำเข้าการอ้างอิงและตั้งค่าสถานะ
ขั้นแรก นำเข้าการขึ้นต่อกันที่จำเป็นสำหรับการจัดการสถานะและผลข้างเคียง เพิ่มบรรทัดต่อไปนี้ที่ด้านบนของไฟล์ส่วนประกอบของคุณ:
import React, { useState, useEffect } from 'react';
ถัดไป ตั้งค่าตัวแปรสถานะเพื่อเก็บพิกัดกึ่งกลางไดนามิก ในองค์ประกอบ Map
ของคุณ ให้เริ่มต้นสถานะ center
โดยใช้ตะขอ useState
:
function Map() { const [center, setCenter] = useState({ lat: -3.745, lng: -38.523 }); // Rest of your Map component code... }
อย่าลืมลบอันก่อนหน้า center
ขั้นตอนที่ 2: ใช้ตรรกะตำแหน่งทางภูมิศาสตร์
ภายในองค์ประกอบ Map
ให้เพิ่มฮุก useEffect
เพื่อดึงข้อมูลตำแหน่งทางภูมิศาสตร์ปัจจุบันของผู้ใช้ และอัปเดตสถานะ center
ตามนั้น วางโค้ดนี้ไว้หลังบรรทัด const [center, setCenter] = useState(...)
:
useEffect(() => { const options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { const crd = pos.coords; const coords = { lat: crd.latitude, lng: crd.longitude, }; setCenter(coords); } function error(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } navigator.geolocation.getCurrentPosition(success, error, options); }, []);
สรุป:
ขอขอบคุณที่สำรวจตัวอย่างแผนที่เชิงโต้ตอบนี้! คุณสามารถค้นหารหัสเต็มได้ที่ GitHub- คลิกที่นี่
หากคุณมีคำถามหรือต้องการความช่วยเหลือ โปรดติดต่อฉันที่ LinkedIn ฉันมาที่นี่เพื่อช่วยเหลือและหารือเกี่ยวกับแง่มุมต่างๆ ของตัวอย่างนี้
ขอให้มีความสุขในการเขียนโค้ด!