یک نقشه گوگل را به برنامه React اضافه کنید

1. قبل از شروع

در این لبه کد، همه چیزهایی را که برای شروع با کتابخانه vis.gl/react-google-map برای Google Maps JavaScript API نیاز دارید، یاد می گیرید، که به شما امکان می دهد نقشه گوگل را به برنامه React اضافه کنید. شما یاد می گیرید که چگونه راه اندازی کنید، Maps JavaScript API را بارگیری کنید، اولین نقشه خود را نمایش دهید، با نشانگرها و خوشه بندی نشانگرها کار کنید، روی نقشه بکشید، و تعامل با کاربر را مدیریت کنید.

پیش نیازها

  • دانش اولیه جاوا اسکریپت، HTML و CSS

آنچه یاد می گیرید

  • چگونه با کتابخانه vis.gl/react-google-map برای پلتفرم Google Maps شروع به کار کنیم.
  • نحوه بارگیری Maps JavaScript API به صورت اعلامی
  • نحوه بارگذاری نقشه در برنامه React
  • نحوه استفاده از نشانگرها، نشانگرهای سفارشی و خوشه بندی نشانگر.
  • نحوه کار با سیستم رویداد Maps JavaScript API برای ارائه تعامل با کاربر.
  • نحوه کنترل نقشه به صورت پویا
  • نحوه ترسیم روی نقشه

آنچه شما نیاز دارید

  • یک حساب Google Cloud با فعال کردن صورت‌حساب.
  • یک کلید API پلتفرم Google Maps با فعال کردن API جاوا اسکریپت Maps.
  • Node.js روی رایانه شما نصب شده است.
  • یک ویرایشگر متن یا IDE به انتخاب شما.
  • کتابخانه vis.gl/react-google-map برای Google Maps JavaScript API.
  • کتابخانه googlemaps/markerclusterer

پلتفرم نقشه های گوگل را راه اندازی کنید

اگر قبلاً یک حساب Google Cloud Platform و پروژه‌ای با صورت‌حساب فعال ندارید، لطفاً راهنمای شروع به کار با Google Maps Platform را برای ایجاد یک حساب صورت‌حساب و یک پروژه ببینید.

  1. در Cloud Console ، روی منوی کشویی پروژه کلیک کنید و پروژه ای را که می خواهید برای این کد لبه استفاده کنید انتخاب کنید.

  1. APIها و SDKهای پلتفرم Google Maps مورد نیاز برای این لبه کد را در Google Cloud Marketplace فعال کنید. برای انجام این کار، مراحل این ویدیو یا این مستند را دنبال کنید.
  2. یک کلید API در صفحه Credentials در Cloud Console ایجاد کنید. می توانید مراحل این ویدئو یا این مستند را دنبال کنید. همه درخواست‌ها به پلتفرم Google Maps به یک کلید API نیاز دارند.

2. راه اندازی شوید

پروژه شروع را دانلود کنید

برای دانلود قالب پروژه شروع و کد راه حل، مراحل زیر را دنبال کنید:

  1. مخزن GitHub را دانلود یا فورک کنید. پروژه شروع در دایرکتوری /starter قرار دارد و شامل ساختار فایل اصلی است که برای تکمیل کد لبه نیاز دارید. شما تمام کارهای خود را در پوشه /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 همچنین هر زمان که کد را تغییر دهید به طور خودکار برنامه شما را در مرورگر بارگیری می کند. اگر پیوند ارائه شده در پایان فرآیند ساخت را دنبال کنید، باید یک صفحه وب پیدا کنید که روی آن نوشته شده است: "سلام، دنیا!"

  1. اگر می خواهید کد راه حل کامل را اجرا کنید، به دایرکتوری /solution بروید و همان مراحل راه اندازی را انجام دهید.

3. Maps JavaScript API را بارگیری کنید

اساس استفاده از پلتفرم نقشه های گوگل برای وب، Maps JavaScript API است. این API یک رابط جاوا اسکریپت برای استفاده از تمام ویژگی‌های پلتفرم نقشه‌های گوگل، از جمله نقشه، نشانگرها، ابزارهای طراحی و سایر خدمات پلتفرم نقشه‌های گوگل، مانند Places، ارائه می‌کند.

برای بارگیری Maps JavaScript API با چارچوب React، باید از مؤلفه APIProvider که بخشی از کتابخانه vis.gl/react-google-map است استفاده کنید. این مؤلفه را می توان در هر سطحی از برنامه اضافه کرد، معمولاً در جایی در بالا، و همه مؤلفه های فرزند را بدون تغییر ارائه می کند. علاوه بر مدیریت بارگذاری Maps JavaScript API، همچنین اطلاعات زمینه و توابع را برای سایر اجزا و قلاب های این کتابخانه فراهم می کند. APIProvider در کتابخانه vis.gl/react-google-map گنجانده شده است، بنابراین زمانی که npm install قبلاً اجرا کردید نصب شد.

برای استفاده از کامپوننت APIProvider ، مراحل زیر را دنبال کنید:

  1. فایل /src/app.tsx را باز کنید. این فایل جایی است که شما تمام کارهای خود را برای این کد لبه انجام می دهید.
  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 Maps شما، نسخه‌ای از API که می‌خواهید بارگیری کنید، و هر کتابخانه اضافی ارائه‌شده توسط Maps JavaScript API که می‌خواهید بارگیری کنید.

کلید Google Maps API تنها ویژگی مورد نیاز برای عملکرد APIProvider است، و ما ویژگی onLoad را برای اهداف نمایشی اضافه کردیم. برای اطلاعات بیشتر به <APIProvider> Component مراجعه کنید.

فایل 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 را در کنسول مرورگر مشاهده کنید. اکنون که Maps JavaScript API بارگذاری شده است، می توانید نقشه پویا را در مرحله بعد رندر کنید.

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 از تنظیمات مختلف برای نقشه پشتیبانی می کند. برای این کد لبه از تنظیمات زیر استفاده می کنید:

  • 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. یک طراحی نقشه مبتنی بر ابر اضافه کنید

شناسه نقشه یک الزام برای استفاده از نشانگرهای پیشرفته است که از آنها برای علامت گذاری نقاط مورد علاقه در نقشه سیدنی استفاده می کنید. شناسه نقشه نیز برای طراحی نقشه مبتنی بر ابر استفاده می شود.

می توانید سبک نقشه خود را با استفاده از استایل نقشه مبتنی بر ابر سفارشی کنید.

یک شناسه نقشه ایجاد کنید

اگر هنوز شناسه نقشه با سبک نقشه مرتبط با آن ایجاد نکرده‌اید، برای تکمیل مراحل زیر، راهنمای Map IDs را ببینید:

  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 Maps استفاده کرده‌اید، احتمالاً با نشانگر پیش‌فرض آشنا هستید که به شکل زیر است:

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

الگوریتم برای خوشه بندی نشانگر، منطقه قابل مشاهده نقشه را به یک شبکه تقسیم می کند، سپس نمادهایی را که در همان سلول هستند، خوشه بندی می کند. خوشبختانه، لازم نیست نگران هیچ‌کدام از این موارد باشید، زیرا تیم پلتفرم نقشه‌های گوگل یک کتابخانه ابزار مفید و منبع باز به نام 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';

برای پروژه الگوی این کد لبه، کتابخانه ابزار MarkerClustererPlus قبلاً در وابستگی‌های اعلام شده در فایل package.json گنجانده شده است، بنابراین شما قبلاً آن را هنگام اجرای npm install در ابتدای این کد لبه نصب کرده‌اید.

  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 state و مراجع، نشانگرهایی را که در مرحله قبل ایجاد کرده اید، به طور خودکار خوشه بندی می کند.

کامپوننت 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 را اضافه می کنید.

Maps JavaScript API یک سیستم رویداد جامع را ارائه می‌کند که از کنترل‌کننده‌های رویداد جاوا اسکریپت برای مدیریت تعاملات مختلف کاربر در کد استفاده می‌کند. برای مثال، می‌توانید شنوندگان رویداد ایجاد کنید تا اجرای کد را برای فعل و انفعالاتی مانند کلیک کاربر روی نقشه و نشانگرها، جابجایی نمای نقشه، بزرگ‌نمایی و کوچک‌نمایی و غیره ایجاد کنید.

برای افزودن یک click شنونده به نشانگرهای خود و سپس به صورت برنامه‌ریزی پانل نقشه را طوری بسازید که نشانگر کلیک شده در مرکز نقشه ظاهر شود، این مراحل را دنبال کنید:

  1. یک پاسخ تماس کنترل کننده click ایجاد کنید.

در مؤلفه PoiMarkers ، یک کنترل کننده click با استفاده از useCallback() تعریف کنید.

رویداد click هر زمان که کاربر روی یک نشانگر کلیک یا ضربه می‌زند فعال می‌شود و رویدادی را به‌عنوان یک شی JSON با اطلاعاتی درباره عنصر UI که روی آن کلیک شده است، برمی‌گرداند. برای بهبود تجربه کاربری نقشه، می‌توانید رویداد click را مدیریت کنید و از شی LatLng آن برای دریافت طول و عرض جغرافیایی نشانگری که روی آن کلیک شده است استفاده کنید.

هنگامی که طول و عرض جغرافیایی را دارید، آن را به تابع داخلی panTo() نمونه Map ارسال کنید تا با افزودن موارد زیر در تابع callback کنترل کننده رویداد، نقشه به آرامی روی نشانگر کلیک شده حرکت کند: 

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. کنترل کننده های click را به نشانگرها اختصاص دهید.

عناصر AdvancedMarker کتابخانه vis.gl/react-google-map دو ویژگی را نشان می دهد که برای مدیریت کلیک ها مفید است:

  • clickable : اگر درست باشد، AdvancedMarker قابل کلیک خواهد بود و رویداد gmp-click را راه اندازی می کند و برای اهداف دسترسی تعاملی خواهد بود. به عنوان مثال، به پیمایش صفحه کلید با کلیدهای جهت دار اجازه می دهد.
  • onClick : عملکرد برگشت به تماس برای تماس زمانی که رویداد click رخ می دهد.
  1. رندر PoiMarkers خود را به روز کنید تا یک کنترل کننده click به هر نشانگر اختصاص دهید: 
return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          ... other properties ...
          clickable={true}
          onClick={handleClick}
          >
           ...
        </AdvancedMarker>
      ))}
    </>
  );
  1. به مرورگر بروید و روی نشانگرهای خود کلیک کنید. هنگامی که روی یک نشانگر کلیک می‌شود، باید نقشه را به‌طور خودکار به سمت جدیدتر حرکت دهید.

برای جمع‌بندی، در این بخش، شما از سیستم رویداد React برای اختصاص یک کنترل‌کننده click به همه نشانگرهای روی نقشه استفاده کردید، طول و عرض جغرافیایی نشانگر را از رویداد click اجرا شده بازیابی کردید، و از آن برای بازیابی مجدد نقشه هر زمان که روی یک نشانگر کلیک شد استفاده کردید.

فقط یک قدم دیگر باقی مانده است! در مرحله بعد، تجربه کاربری نقشه را با ویژگی‌های ترسیم Maps JavaScript API بهبود می‌بخشید.

9. روی نقشه بکشید

تاکنون نقشه ای از سیدنی ایجاد کرده اید که نشانگرهایی را برای مقاصد گردشگری محبوب نشان می دهد و تعامل کاربر را مدیریت می کند. برای آخرین مرحله از این نرم افزار کد، از ویژگی های ترسیم Maps JavaScript API استفاده می کنید تا یک ویژگی مفید اضافی را به تجربه نقشه خود اضافه کنید.

تصور کنید که این نقشه قرار است توسط کاربرانی که می خواهند شهر سیدنی را کاوش کنند استفاده کنند. یک ویژگی مفید این است که هنگام کلیک روی یک نشانگر، شعاع اطراف آن را تجسم کنید. این به کاربر اجازه می‌دهد بفهمد که چه مقاصدی در فاصله‌ی پیاده‌روی نشانگر کلیک شده قرار دارند.

Maps JavaScript API شامل مجموعه ای از توابع برای ترسیم اشکال بر روی نقشه است، مانند مربع، چند ضلعی، خطوط و دایره. کتابخانه vis.gl/react-google-map این قابلیت ها را در React در دسترس شما قرار می دهد.

در مرحله بعد، یک دایره را رندر می‌دهید تا شعاع 800 متری (تقریباً نیم مایل) در اطراف یک نشانگر را با کلیک روی آن نشان دهید.

مخزن استارت حاوی یک جزء سفارشی برای یک عنصر circle است. می توانید آن را در فایل src/components/circle.tsx پیدا کنید.

برای اینکه کاربران بتوانند روی نقشه ترسیم کنند، این مراحل را دنبال کنید:

  1. واردات خود را به‌روزرسانی کنید تا مؤلفه Circle ارائه شده را نیز شامل شود. 
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);
  });

توابع ترسیم در Maps JavaScript API گزینه های بسیار متنوعی را برای نحوه نمایش یک شی ترسیم شده روی نقشه در اختیار شما قرار می دهد. برای ارائه یک شعاع دایره‌ای، ویژگی‌های عنصر دایره مانند رنگ و وزن ضربه‌ای را که باید در مرکز دایره و شعاع آن قرار گیرد، تنظیم کنید.

  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 Maps ساخته اید، از جمله بارگیری Maps JavaScript API، بارگیری نقشه، کار با نشانگرها، کنترل و ترسیم روی نقشه، و افزودن تعامل کاربر.

برای مشاهده کد تکمیل شده، به دایرکتوری /solutions مراجعه کنید.

بیشتر بدانید