הוספת מפת Google לאפליקציית React

1. לפני שמתחילים

ב-codelab הזה תלמדו את כל מה שצריך כדי להתחיל להשתמש בספרייה vis.gl/react-google-map של ממשק JavaScript API של מפות Google, שמאפשרת להוסיף מפת Google לאפליקציית React. תלמדו איך להגדיר את הספרייה, לטעון את ממשק JavaScript API של מפות Google, להציג את המפה הראשונה, לעבוד עם סמנים ועם קיבוץ סמנים, לצייר על המפה ולטפל באינטראקציה של המשתמשים.

דרישות מוקדמות

  • ידע בסיסי ב-JavaScript, ב-HTML וב-CSS

מה לומדים

  • איך מתחילים לעבוד עם ספריית vis.gl/react-google-map בפלטפורמה של מפות Google.
  • איך לטעון את Maps JavaScript API באופן הצהרתי.
  • איך טוענים מפה באפליקציית React.
  • איך משתמשים בסמנים, בסמנים מותאמים אישית ובקיבוץ סמנים.
  • איך עובדים עם מערכת האירועים של Maps JavaScript API כדי לספק אינטראקציה עם המשתמש.
  • איך לשלוט במפה באופן דינמי.
  • איך מציירים על המפה.

מה צריך

  • חשבון ב-Google Cloud עם חיוב מופעל.
  • מפתח API של הפלטפורמה של מפות Google עם ממשק API של JavaScript במפות Google מופעל.
  • Node.js מותקן במחשב.
  • עורך טקסט או סביבת פיתוח משולבת (IDE) לבחירתכם.
  • ספריית vis.gl/react-google-map ל-Google Maps JavaScript API.
  • הספרייה googlemaps/markerclusterer

הגדרת הפלטפורמה של מפות Google

אם עדיין אין לכם חשבון ב-Google Cloud Platform ופרויקט עם חיוב מופעל, תוכלו לעיין במדריך תחילת העבודה עם הפלטפורמה של מפות Google כדי ליצור חשבון לחיוב ופרויקט.

  1. בCloud Console, לוחצים על התפריט הנפתח של הפרויקט ובוחרים את הפרויקט שבו רוצים להשתמש ב-codelab הזה.

  1. מפעילים ב-Google Cloud Marketplace את ממשקי ה-API וערכות ה-SDK של הפלטפורמה של מפות Google שנדרשים ל-codelab הזה. כדי לעשות זאת, פועלים לפי השלבים בסרטון הזה או בתיעוד הזה.
  2. יוצרים מפתח API בדף Credentials במסוף Cloud. אפשר לפעול לפי השלבים שמפורטים בסרטון הזה או בתיעוד הזה. כל הבקשות אל הפלטפורמה של מפות Google מחייבות מפתח API.

2. להגדרה

הורדת פרויקט למתחילים

כדי להוריד את תבנית פרויקט המתחילים ואת קוד הפתרון:

  1. מורידים או יוצרים עותק של המאגר ב-GitHub. פרויקט המתחילים נמצא בספרייה /starter וכולל את מבנה הקבצים הבסיסי שדרוש לכם כדי להשלים את ה-codelab. אתם מבצעים את כל העבודה בספרייה /starter/src.
git clone https://github.com/googlemaps-samples/codelab-maps-platform-101-react-js.git

אפשר גם ללחוץ על הכפתור הזה כדי להוריד את קוד המקור.

  1. עוברים לספרייה /starter ומתקינים את npm. הפעולה הזו תתקין את כל הרכיבים התלויים שנדרשים ומפורטים בקובץ package.json.
cd starter && npm install
  1. בזמן שעדיין נמצאים בספרייה /starter:
npm start

פרויקט המתחילים מוגדר לשימוש בשרת הפיתוח של Vite, שמקמפל ומריץ את הקוד שאתם כותבים באופן מקומי. שרת הפיתוח של Vite גם טוען מחדש את האפליקציה בדפדפן באופן אוטומטי בכל פעם שאתם מבצעים שינויים בקוד. אם תלחצו על הקישור שמופיע בסוף תהליך הבנייה, תגיעו לדף אינטרנט שבו מופיע הכיתוב: Hello, world!‎

  1. כדי להריץ את קוד הפתרון המלא, עוברים אל ספריית /solution ומשלימים את אותם שלבי הגדרה.

3. טעינת Maps JavaScript API

הבסיס לשימוש בפלטפורמה של מפות Google לאינטרנט הוא Maps JavaScript API. ממשק ה-API הזה מספק ממשק JavaScript לשימוש בכל התכונות של הפלטפורמה של מפות Google, כולל המפה, הסמנים, כלי הציור ושירותים אחרים של הפלטפורמה של מפות Google, כמו Places.

כדי לטעון את Maps JavaScript API באמצעות React framework, צריך להשתמש ברכיב APIProvider שהוא חלק מהספרייה vis.gl/react-google-map. אפשר להוסיף את הרכיב הזה בכל רמה של האפליקציה, בדרך כלל בחלק העליון, והוא מעבד את כל רכיבי הצאצא ללא שינוי. בנוסף לטיפול בטעינה של Maps JavaScript API, הוא מספק גם מידע על ההקשר ופונקציות לרכיבים ול-hooks האחרים בספרייה הזו. הספרייה APIProvider כלולה בספרייה vis.gl/react-google-map, ולכן היא הותקנה כשמריצים את npm install.

כדי להשתמש ברכיב APIProvider, מבצעים את השלבים הבאים:

  1. פותחים את הקובץ /src/app.tsx. בקובץ הזה מבצעים את כל העבודה ב-codelab הזה.
  2. בחלק העליון של הקובץ, מייבאים את המחלקה APIProvider מהספרייה @vis.gl/react-google-maps:
import {APIProvider} from '@vis.gl/react-google-maps';
  1. בהגדרת הפונקציה App, מגדירים את הפרמטר apiKey של הרכיב APIProvider עם מפתח ה-API שנוצר בשלב הקודם, ואת המאפיין onLoad עם הודעת יומן במסוף:
<APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>

רכיב APIProvider מקבל סדרה של מאפיינים שמציינים אפשרויות שונות לטעינת Maps JavaScript API, כולל מפתח API של הפלטפורמה של מפות Google, הגרסה של ה-API שרוצים לטעון וספריות נוספות שסופקו על ידי Maps JavaScript API שרוצים לטעון.

מפתח Google Maps API הוא הנכס היחיד שנדרש כדי ש-APIProvider יפעל, והוספנו את הנכס onLoad למטרות הדגמה. מידע נוסף זמין במאמר רכיב <APIProvider>.

קובץ app.tsx אמור להיראות כך:

import React from 'react';
import {createRoot} from "react-dom/client";
import {APIProvider} from '@vis.gl/react-google-maps';

const App = () => (
 <APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <h1>Hello, world!</h1>
 </APIProvider>
);

const root = createRoot(document.getElementById('app'));
root.render(<App />);

export default App;

אם הכול יפעל כמו שצריך, המשפט console.log יופיע במסוף הדפדפן. אחרי שממשק API של JavaScript במפות Google נטען, אפשר לעבד את המפה הדינמית בשלב הבא.

4. הצגת מפה

הגיע הזמן להציג את המפה הראשונה!

החלק הנפוץ ביותר ב-Maps JavaScript API הוא google.maps.Map, שהוא המחלקה שמאפשרת ליצור מופעים של מפות ולבצע בהם מניפולציות. הספרייה vis.gl/react-google-map עוטפת את המחלקה הזו ברכיב Map. קודם מייבאים את הכיתות Map וMapCameraChangedEvent.

import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

רכיב Map תומך במגוון הגדרות שונות למפה. ב-codelab הזה משתמשים בהגדרות הבאות:

  • ‫defaultCenter, שקובע את קו הרוחב וקו האורך של מרכז המפה.
  • ‫defaultZoom, שקובע את רמת הזום ההתחלתית של המפה.
  • כדי להציג מפה, מציבים את הקוד הבא בתוך התגים APIProvider כדי למרכז את המפה בסידני, אוסטרליה, ולהגדיר לה רמת זום של 13, שהיא רמת הזום הנכונה להצגת מרכז העיר:
 <Map
      defaultZoom={13}
      defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
      onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
</Map>

עכשיו אמורה להופיע במפה של סידני בדפדפן:

761c8c51c6631174.png

לסיכום, בקטע הזה הצגתם מפה באמצעות הרכיב <Map> והגדרתם את המצב הראשוני שלה באמצעות מאפיינים. השתמשתם גם באירועים כדי לתעד את הרגע שבו המצלמה השתנתה.

קובץ app.tsx אמור להיראות כך:

import React from 'react';
import {createRoot} from "react-dom/client";
import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

const App = () => (
 <APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <Map
      defaultZoom={13}
      defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
      onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
   </Map>
 </APIProvider>
);

const root = createRoot(document.getElementById('app'));
root.render(<App />);

export default App;

5. הוספת עיצוב מפות מבוסס-ענן

מזהה מפה הוא דרישה לשימוש בסמנים מתקדמים, שמשמשים לסימון נקודות עניין במפה של סידני. מזהה מפה משמש גם לעיצוב מפות מבוסס-ענן.

אתם יכולים להתאים אישית את הסגנון של המפה באמצעות עיצוב מפות מבוסס-ענן.

יצירת מזהה מפה

אם עדיין לא יצרתם מזהה מפה עם סגנון מפה שמשויך אליו, כדאי לעיין במדריך בנושא מזהי מפה כדי לבצע את השלבים הבאים:

  1. יוצרים מזהה מפה.
  2. משייכים מזהה מפה לסגנון מפה.

כדי להשתמש במזהה המפה שיצרתם, צריך להגדיר את המאפיין mapId של הרכיב <Map>:

<Map
    defaultZoom={13}
    defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
    mapId='DEMO_MAP_ID'
    onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
    }>
</Map>

הסגנון שבחרתם אמור להופיע במפה.

6. הוספת סמנים למפה

מפתחים עושים הרבה דברים באמצעות Maps JavaScript API, אבל הצבת סמנים במפה היא ללא ספק הפעולה הפופולרית ביותר. סמנים מאפשרים להציג נקודות ספציפיות במפה, והם רכיב נפוץ בממשק המשתמש לטיפול באינטראקציה של המשתמשים. אם השתמשתם בעבר במפות Google, סביר להניח שאתם מכירים את סמן ברירת המחדל, שנראה כך:

d9a6513b82a2f1e1.png

כדי להשתמש ברכיב AdvancedMarker כדי להציב סמנים במפה, פועלים לפי השלבים הבאים:

  1. יוצרים רשימה של אובייקטים שמייצגים נקודות עניין באזור סידני, וממקמים אותה מיד מתחת לייבוא, מחוץ להגדרה App:
type Poi ={ key: string, location: google.maps.LatLngLiteral }
const locations: Poi[] = [
  {key: 'operaHouse', location: { lat: -33.8567844, lng: 151.213108  }},
  {key: 'tarongaZoo', location: { lat: -33.8472767, lng: 151.2188164 }},
  {key: 'manlyBeach', location: { lat: -33.8209738, lng: 151.2563253 }},
  {key: 'hyderPark', location: { lat: -33.8690081, lng: 151.2052393 }},
  {key: 'theRocks', location: { lat: -33.8587568, lng: 151.2058246 }},
  {key: 'circularQuay', location: { lat: -33.858761, lng: 151.2055688 }},
  {key: 'harbourBridge', location: { lat: -33.852228, lng: 151.2038374 }},
  {key: 'kingsCross', location: { lat: -33.8737375, lng: 151.222569 }},
  {key: 'botanicGardens', location: { lat: -33.864167, lng: 151.216387 }},
  {key: 'museumOfSydney', location: { lat: -33.8636005, lng: 151.2092542 }},
  {key: 'maritimeMuseum', location: { lat: -33.869395, lng: 151.198648 }},
  {key: 'kingStreetWharf', location: { lat: -33.8665445, lng: 151.1989808 }},
  {key: 'aquarium', location: { lat: -33.869627, lng: 151.202146 }},
  {key: 'darlingHarbour', location: { lat: -33.87488, lng: 151.1987113 }},
  {key: 'barangaroo', location: { lat: - 33.8605523, lng: 151.1972205 }},
];

const App = () => (
  ...
);
  1. אפשר להתאים אישית את הסיכות באמצעות הרכיב <Pin>:
<Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
  1. יוצרים רכיב מותאם אישית לעיבוד הרשימה באמצעות סמנים מתקדמים, ומציבים אותו מתחת להגדרה של App:
const App = () => (
  ...
);

const PoiMarkers = (props: {pois: Poi[]}) => {
  return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}>
        <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};
  1. מוסיפים את הרכיב PoiMarkers כרכיב צאצא של הרכיב Map:
<Map
  ... map properties ...
>
  <PoiMarkers pois={locations} />
</Map>
  1. לבסוף, מוסיפים את Pin ואת AdvancedMarker לייבוא.
import {
  APIProvider,
  Map,
  AdvancedMarker,
  MapCameraChangedEvent,
  Pin
} from '@vis.gl/react-google-maps';

במפה אמורים להופיע סמנים מתקדמים בהתאמה אישית:

98d12a994e12a2c1.png

7. הפעלת קיבוץ סמנים

כשמשתמשים בהרבה סמנים או בסמנים שקרובים זה לזה, יכול להיות שתיתקלו בבעיה שבה הסמנים חופפים או צפופים מדי, מה שפוגע בחוויית המשתמש. לדוגמה, אחרי שיוצרים את הסמנים בשלב האחרון, יכול להיות שתשימו לב לזה:

98d12a994e12a2c1.png

כאן נכנס לתמונה מקבץ סמנים. תכונה נפוצה נוספת היא אשכול סמנים, שמאגדת סמנים סמוכים לסמל יחיד שמשתנה בהתאם לרמת הזום, כמו בדוגמה הבאה:

3da24a6b737fe499.png

האלגוריתם של קיבוץ סמנים מחלק את האזור הגלוי במפה לרשת, ואז מקבץ סמלים שנמצאים באותה משבצת. למזלכם, אתם לא צריכים לדאוג לכל זה כי צוות הפלטפורמה של מפות Google יצר ספריית כלי עזר שימושית בקוד פתוח בשם MarkerClustererPlus, שמבצעת את כל הפעולות בשבילכם באופן אוטומטי. אפשר לראות את המקור של ספריית MarkerClustererPlus ב-GitHub.

כדי להפעיל את התכונה 'קיבוץ סמנים':

  1. בחלק העליון של קובץ app.tsx, נעדכן ונוסיף לייבוא של הספריות ולסוגים הנתמכים.
import React, {useEffect, useState, useRef, useCallback} from 'react';
import {createRoot} from "react-dom/client";
import {
    APIProvider,
    Map,
    AdvancedMarker,
    MapCameraChangedEvent,
    useMap,
    Pin
  } from '@vis.gl/react-google-maps';
  import {MarkerClusterer} from '@googlemaps/markerclusterer';
  import type {Marker} from '@googlemaps/markerclusterer';

בפרויקט התבנית של ה-codelab הזה, ספריית כלי השירות MarkerClustererPlus כבר נכללת בתלות שהוגדרה בקובץ package.json, כך שכבר התקנתם אותה כשביצעתם את הפקודה npm install בתחילת ה-codelab הזה.

  1. יוצרים משתנים לרכיב MarkerClusterer ולרכיבי התמיכה ברכיב PoiMarkers.

כדי לאתחל את MarkerClusterer, צריך מופע של המפה. מקבלים את המופע מהוו useMap():

const map = useMap();
  1. יוצרים רשימה של סמנים שמאוחסנים במשתנה מצב:
const [markers, setMarkers] = useState<{[key: string]: Marker}>({});
  1. שומרים את האובייקט של האשכול כהפניה:
const clusterer = useRef<MarkerClusterer | null>(null);
  1. בנוסף, ברכיב PoiMarkers, יוצרים מופע של MarkerClusterer ומעבירים לו את המופע של Map שבו רוצים להציג את קבוצות הסמנים:
 useEffect(() => {
    if (!map) return;
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({map});
    }
  }, [map]);
  1. יוצרים אפקט שמעדכן את הכלי לאשכולות כשחלים שינויים ברשימת הסמנים:
useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);
  1. יוצרים פונקציה להנפקת הפניות לסמנים חדשים:
const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };
  1. משתמשים בשיטה הזו ברכיב AdvancedMarker כדי ליצור את ההפניה לכל סמן.
<AdvancedMarker
  key={poi.key}
  position={poi.location}
  ref={marker => setMarkerRef(marker, poi.key)}
  >
    <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
</AdvancedMarker>

עכשיו אמורים להופיע במפה אשכולות של סמנים:

3da24a6b737fe499.png

אם מגדילים או מקטינים את התצוגה, MarkerClustererPlus משנה את המספור של האשכולות ואת הגודל שלהם באופן אוטומטי. אפשר גם ללחוץ על סמל של צביר סמנים כדי להתקרב ולראות את כל הסמנים שנכללים בצביר הזה.

d5e75480e9abd3c7.png

לסיכום, בחלק הזה ייבאתם את ספריית כלי השירות MarkerClustererPlus בקוד פתוח והשתמשתם בה כדי ליצור מופע של MarkerClusterer, שבעזרת מצב והפניות של React, קיבץ אוטומטית את הסמנים שיצרתם בשלב הקודם.

רכיב PoiMarkers אמור להיראות כך:

const PoiMarkers = (props: { pois: Poi[] }) => {
  const map = useMap();
  const [markers, setMarkers] = useState<{[key: string]: Marker}>({});
  const clusterer = useRef<MarkerClusterer | null>(null);

  // Initialize MarkerClusterer, if the map has changed
  useEffect(() => {
    if (!map) return;
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({map});
    }
  }, [map]);

  // Update markers, if the markers array has changed
  useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);

  const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };

  return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}
          ref={marker => setMarkerRef(marker, poi.key)}
          >
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

בשלב הבא תלמדו איך לטפל באינטראקציה של המשתמשים.

8. הוספת אינטראקציה של משתמש

עכשיו יש לכם מפה יפה שמוצגים בה כמה מהיעדים התיירותיים הפופולריים ביותר בסידני. בקטע הזה מוסיפים עוד כמה טיפולים באינטראקציות של משתמשים עם מערכת האירועים של Maps JavaScript API כדי לשפר עוד יותר את חוויית המשתמש במפה.

ממשק ה-API של JavaScript במפות Google מספק מערכת אירועים מקיפה שמשתמשת ב-handlers של אירועי JavaScript כדי לאפשר לכם לטפל באינטראקציות שונות של משתמשים בקוד. לדוגמה, אפשר ליצור מאזינים לאירועים כדי להפעיל ביצוע קוד לאינטראקציות כמו קליק של המשתמש על המפה ועל הסמנים, הזזה של תצוגת המפה, שינוי מרחק התצוגה ועוד.

כדי להוסיף click listener לסמנים ואז לתכנת את המפה כך שהיא תזוז כדי שהסמן שנלחץ יופיע במרכז המפה, פועלים לפי השלבים הבאים:

  1. יוצרים קריאה חוזרת (callback) לטיפול ב-click.

ברכיב PoiMarkers, מגדירים את ה-handler של click באמצעות useCallback() של React.

האירוע click מופעל בכל פעם שמשתמש לוחץ על סמן או מקיש עליו, ומחזיר אירוע כאובייקט JSON עם מידע על רכיב ממשק המשתמש שעליו לחצו. כדי לשפר את חוויית המשתמש במפה, אפשר לטפל באירוע click ולהשתמש באובייקט LatLng שלו כדי לקבל את קו הרוחב וקו האורך של הסמן שעליו לחצו.

אחרי שמקבלים את קווי הרוחב והאורך, מעבירים אותם לפונקציה המובנית panTo() של מופע Map כדי שהמפה תזוז בצורה חלקה למרכז החדש של הסמן שנלחץ. לשם כך, מוסיפים את הקוד הבא לפונקציית הקריאה החוזרת של handler האירועים:

const PoiMarkers = (props: { pois: Poi[] }) => {
...
const handleClick = useCallback((ev: google.maps.MapMouseEvent) => {
    if(!map) return;
    if(!ev.latLng) return;
    console.log('marker clicked:', ev.latLng.toString());
    map.panTo(ev.latLng);
  });
...
};
  1. מקצים את רכיבי ה-handler של click לסמנים.

רכיבי AdvancedMarker בספריית vis.gl/react-google-map חושפים שני מאפיינים שימושיים לטיפול בקליקים:

  • ‫clickable: אם הערך הוא true, אפשר יהיה ללחוץ על AdvancedMarker, הוא יפעיל את האירוע gmp-click ויהיה אינטראקטיבי למטרות נגישות. לדוגמה, היא תאפשר ניווט במקלדת באמצעות מקשי החיצים.
  • ‫onClick: פונקציית הקריאה החוזרת שמופעלת כשמתרחש אירוע click.
  1. מעדכנים את PoiMarkers rendering כדי להקצות handler של click לכל סמן:
return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          ... other properties ...
          clickable={true}
          onClick={handleClick}
          >
           ...
        </AdvancedMarker>
      ))}
    </>
  );
  1. עוברים לדפדפן ולוחצים על הסמנים. כשלוחצים על סמן, המפה אמורה להזיז את עצמה באופן אוטומטי כדי לחזור למרכז.

לסיכום, בחלק הזה השתמשתם במערכת האירועים של React כדי להקצות click handler לכל הסמנים במפה, אחזרתם את קו הרוחב וקו האורך של הסמן מאירוע click שהופעל, והשתמשתם בנתונים האלה כדי למרכז מחדש את המפה בכל פעם שלוחצים על סמן.

רק עוד שלב אחד וסיימתם! לאחר מכן, משפרים עוד יותר את חוויית המשתמש במפה באמצעות תכונות הציור של Maps JavaScript API.

9. ציור על המפה

עד עכשיו יצרתם מפה של סידני שמוצגים בה סמנים של יעדים תיירותיים פופולריים, וטיפלתם באינטראקציה של המשתמשים. בשלב האחרון של ה-codelab הזה, תשתמשו בתכונות השרטוט של Maps JavaScript API כדי להוסיף תכונה שימושית נוספת לחוויית השימוש במפה.

תארו לעצמכם שהמשתמשים במפה הזו רוצים לגלות את העיר סידני. תכונה שימושית תהיה הצגה חזותית של רדיוס מסביב לסמן כשלוחצים עליו. כך המשתמש יוכל להבין אילו יעדים אחרים נמצאים במרחק הליכה מהסמן שעליו הוא לחץ.

‫Maps JavaScript API כולל קבוצה של פונקציות לשרטוט צורות במפה, כמו ריבועים, פוליגונים, קווים ומעגלים. הספרייה vis.gl/react-google-map מאפשרת לכם להשתמש ביכולות האלה ב-React.

לאחר מכן, מעבדים עיגול כדי להציג רדיוס של 800 מטר (כחצי מייל) סביב סמן כשלוחצים עליו.

מאגר התחלה מכיל רכיב מותאם אישית לאלמנט circle. אפשר למצוא אותו בקובץ src/components/circle.tsx.

כדי לאפשר למשתמשים לצייר במפה, פועלים לפי השלבים הבאים:

  1. מעדכנים את הייבוא כך שיכלול את רכיב העיגול שצוין.
import {Circle} from './components/circle'
  1. יוצרים משתנה מצב למרכז המעגל.

מצלמים את מצב מרכז העיגול ברכיב PoiMarkers. מגדירים את המצב ההתחלתי כ-null, ומסתמכים על העובדה שעיגול לא יוצג אלא אם יש לו מיקום מרכז (ורדיוס) תקינים.

const PoiMarkers = (props: { pois: Poi[] }) => {
...
  const [circleCenter, setCircleCenter] = useState(null)
...
};
  1. מעדכנים את מרכז המעגל כשמטפלים באירוע click.

מתקשרים אל setCircleCenter עם המיקום שנמצא באובייקט האירוע:

const handleClick = useCallback((ev: google.maps.MapMouseEvent) => {
    ...
    setCircleCenter(ev.latLng);
  });

פונקציות הציור בממשק JavaScript API של מפות Google מספקות מגוון רחב של אפשרויות לגבי האופן שבו אובייקט מצויר מופיע במפה. כדי להציג רדיוס מעגלי, מגדירים את המאפיינים של רכיב העיגול, כמו צבע ועובי הקו, המיקום שבו העיגול צריך להיות ממוקם במרכז והרדיוס שלו.

  1. מוסיפים עיגול לרינדור ומקשרים את המרכז למשתנה המצב. הרינדור אמור להיראות כך:
return (
    <>
      <Circle
          radius={800}
          center={circleCenter}
          strokeColor={'#0c4cb3'}
          strokeOpacity={1}
          strokeWeight={3}
          fillColor={'#3b82f6'}
          fillOpacity={0.3}
        />
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}
          ref={marker => setMarkerRef(marker, poi.key)}
          clickable={true}
          onClick={handleClick}
          >
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

הכול מוכן! עוברים לדפדפן ולוחצים על אחד מהסמנים. אמור להופיע עיגול שמסמן את הרדיוס סביב המיקום:

d243587f4a9ec4a6.png

10. מזל טוב

יצרתם את אפליקציית האינטרנט הראשונה שלכם באמצעות ספריית vis.gl/react-google-map של הפלטפורמה של מפות Google, כולל טעינה של ממשק API של JavaScript במפות Google, טעינה של מפה, עבודה עם סמנים, שליטה במפה ושרטוט עליה והוספה של אינטראקציה עם המשתמש.

כדי לראות את הקוד המלא, אפשר לעיין בספרייה /solutions.

מידע נוסף