การรวมแผนที่เข้ากับเว็บแอปพลิเคชันสมัยใหม่ได้กลายเป็นส่วนสำคัญในการสร้างประสบการณ์ผู้ใช้ที่น่าดึงดูดและคำนึงถึงสถานที่ ด้วยการถือกำเนิดของ React และไลบรารีเช่น @react-google-maps/api นักพัฒนาจึงสามารถฝังแผนที่เชิงโต้ตอบภายในแอปพลิเคชันของตนได้อย่างง่ายดาย ในคู่มือที่ครอบคลุมนี้ เราจะแนะนำคุณในทุกขั้นตอน ตั้งแต่การตั้งค่าการเชื่อมต่อ Google Cloud ไปจนถึงการใช้ตำแหน่งทางภูมิศาสตร์ ไปจนถึงการสร้างแผนที่ที่น่าทึ่งในโปรเจ็กต์ React ของคุณ

ส่วนที่ 1: การตั้งค่าการเชื่อมต่อ Google Cloud ของคุณ

  1. ไปที่เว็บไซต์ Google Cloud Platform เพื่อเริ่มต้น ผู้ใช้ใหม่ควรลงทะเบียน ไม่ต้องกังวลกับคำขอบัตรเครดิต — ระดับฟรีของ Google ให้การเข้าถึงบริการต่างๆ เช่น Google Maps API
  2. เข้าสู่ “เปิดใช้งานบัญชีเต็ม”
  3. ไปที่เมนู > แพลตฟอร์ม Google Maps > กุญแจและข้อมูลประจำตัว
  4. คัดลอกคีย์และบันทึก

ส่วนที่ 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 ฉันมาที่นี่เพื่อช่วยเหลือและหารือเกี่ยวกับแง่มุมต่างๆ ของตัวอย่างนี้

ขอให้มีความสุขในการเขียนโค้ด!