একটি প্রতিক্রিয়া অ্যাপ্লিকেশনে একটি মানচিত্র এবং মার্কার যোগ করা

ওভারভিউ

এই টিউটোরিয়ালটি আপনাকে দেখায় কিভাবে @googlemaps/react-wrapper ব্যবহার করে একটি React অ্যাপ্লিকেশনে একটি মানচিত্র এবং মার্কার যোগ করতে হয় এবং মানচিত্র এবং মার্কারগুলিকে অ্যাপ্লিকেশন অবস্থায় একত্রিত করতে হয়।

@googlemaps/react-wrapper ইনস্টল করুন

যখন উপাদানটি রেন্ডার করা হয় তখন মানচিত্র জাভাস্ক্রিপ্ট API গতিশীলভাবে লোড করতে @googlemaps/react-wrapper লাইব্রেরি ইনস্টল করুন এবং ব্যবহার করুন৷

npm install @googlemaps/react-wrapper

এই লাইব্রেরিটি আমদানি এবং নিম্নলিখিতগুলির সাথে ব্যবহার করা যেতে পারে।

import { Wrapper, Status } from "@googlemaps/react-wrapper";

এই উপাদানটির মৌলিক ব্যবহার হল শিশু উপাদানগুলিকে মোড়ানো যা Maps JavaScript API-এর উপর নির্ভর করে। Wrapper উপাদানটি লোডিং উপাদানগুলি রেন্ডার করার জন্য বা মানচিত্র জাভাস্ক্রিপ্ট API লোড করার ক্ষেত্রে ত্রুটিগুলি পরিচালনা করার জন্য একটি render প্রপ গ্রহণ করে।

const render = (status: Status) => {
  return <h1>{status}</h1>;
};

<Wrapper apiKey={"YOUR_API_KEY"} render={render}>
  <YourComponent/>
</Wrapper>

একটি মানচিত্রের উপাদান যোগ করুন

একটি মানচিত্র রেন্ডার করার জন্য একটি মৌলিক কার্যকরী উপাদান সম্ভবত useRef , useState এবং useEffect React হুক ব্যবহার করবে।

প্রাথমিক মানচিত্রের উপাদানটিতে নিম্নলিখিত স্বাক্ষর থাকবে।

const Map: React.FC<{}> = () => {};

যেহেতু google.maps.Map এর কনস্ট্রাক্টর প্যারামিটার হিসাবে একটি Element প্রয়োজন, তাই একটি পরিবর্তনযোগ্য বস্তু বজায় রাখার জন্য useRef প্রয়োজন যা উপাদানটির জীবনকাল ধরে থাকবে। নিম্নলিখিত স্নিপেটটি Map উপাদানের মূল অংশে ইফেক্ট হুকের মধ্যে একটি মানচিত্রকে সূচনা করে।

টাইপস্ক্রিপ্ট

const ref = React.useRef<HTMLDivElement>(null);
const [map, setMap] = React.useState<google.maps.Map>();

React.useEffect(() => {
  if (ref.current && !map) {
    setMap(new window.google.maps.Map(ref.current, {}));
  }
}, [ref, map]);
index.tsx

জাভাস্ক্রিপ্ট

const ref = React.useRef(null);
const [map, setMap] = React.useState();

React.useEffect(() => {
  if (ref.current && !map) {
    setMap(new window.google.maps.Map(ref.current, {}));
  }
}, [ref, map]);
index.jsx

উপরের useEffect শুধুমাত্র তখনই চলবে যখন ref পরিবর্তন হবে। Map উপাদান এখন নিম্নলিখিত প্রদান করে।

return <div ref={ref} />

অতিরিক্ত প্রপস সহ মানচিত্রের উপাদান প্রসারিত করুন

মৌলিক মানচিত্র উপাদান মানচিত্র বিকল্প, ইভেন্ট শ্রোতা এবং মানচিত্র ধারণকারী div-এ প্রয়োগ করা শৈলীর জন্য অতিরিক্ত প্রপস সহ প্রসারিত করা যেতে পারে। নিম্নলিখিত কোডটি এই কার্যকরী উপাদানটির প্রসারিত ইন্টারফেস দেখায়।

interface MapProps extends google.maps.MapOptions {
  style: { [key: string]: string };
  onClick?: (e: google.maps.MapMouseEvent) => void;
  onIdle?: (map: google.maps.Map) => void;
}

const Map: React.FC<MapProps> = ({
  onClick,
  onIdle,
  children,
  style,
  ...options
}) => {}

style অবজেক্ট সরাসরি এর মধ্য দিয়ে যেতে পারে এবং রেন্ডার করা div একটি প্রপ হিসাবে সেট করতে পারে।

return <div ref={ref} style={style} />;

onClick , onIdle , এবং google.maps.MapOptions এর জন্য google.maps.Map এ আপডেটগুলি অপরিহার্যভাবে প্রয়োগ করতে useEffect হুকের প্রয়োজন৷

টাইপস্ক্রিপ্ট

// because React does not do deep comparisons, a custom hook is used
// see discussion in https://github.com/googlemaps/js-samples/issues/946
useDeepCompareEffectForMaps(() => {
  if (map) {
    map.setOptions(options);
  }
}, [map, options]);
index.tsx

জাভাস্ক্রিপ্ট

// because React does not do deep comparisons, a custom hook is used
// see discussion in https://github.com/googlemaps/js-samples/issues/946
useDeepCompareEffectForMaps(() => {
  if (map) {
    map.setOptions(options);
  }
}, [map, options]);
index.jsx

ইভেন্ট শ্রোতাদের বিদ্যমান শ্রোতাদের সাফ করার জন্য কিছুটা জটিল কোডের প্রয়োজন হয় যখন একটি প্রপ হিসাবে পাস করা হ্যান্ডলার আপডেট করা হয়।

টাইপস্ক্রিপ্ট

React.useEffect(() => {
  if (map) {
    ["click", "idle"].forEach((eventName) =>
      google.maps.event.clearListeners(map, eventName)
    );

    if (onClick) {
      map.addListener("click", onClick);
    }

    if (onIdle) {
      map.addListener("idle", () => onIdle(map));
    }
  }
}, [map, onClick, onIdle]);
index.tsx

জাভাস্ক্রিপ্ট

React.useEffect(() => {
  if (map) {
    ["click", "idle"].forEach((eventName) =>
      google.maps.event.clearListeners(map, eventName)
    );
    if (onClick) {
      map.addListener("click", onClick);
    }

    if (onIdle) {
      map.addListener("idle", () => onIdle(map));
    }
  }
}, [map, onClick, onIdle]);
index.jsx

একটি চিহ্নিতকারী উপাদান তৈরি করুন

মার্কার উপাদানটি useEffect এবং useState হুক সহ মানচিত্র উপাদান হিসাবে অনুরূপ নিদর্শন ব্যবহার করে।

টাইপস্ক্রিপ্ট

const Marker: React.FC<google.maps.MarkerOptions> = (options) => {
  const [marker, setMarker] = React.useState<google.maps.Marker>();

  React.useEffect(() => {
    if (!marker) {
      setMarker(new google.maps.Marker());
    }

    // remove marker from map on unmount
    return () => {
      if (marker) {
        marker.setMap(null);
      }
    };
  }, [marker]);

  React.useEffect(() => {
    if (marker) {
      marker.setOptions(options);
    }
  }, [marker, options]);

  return null;
};
index.tsx

জাভাস্ক্রিপ্ট

const Marker = (options) => {
  const [marker, setMarker] = React.useState();

  React.useEffect(() => {
    if (!marker) {
      setMarker(new google.maps.Marker());
    }

    // remove marker from map on unmount
    return () => {
      if (marker) {
        marker.setMap(null);
      }
    };
  }, [marker]);
  React.useEffect(() => {
    if (marker) {
      marker.setOptions(options);
    }
  }, [marker, options]);
  return null;
};

index.jsx

google.maps.Map হিসাবে কম্পোনেন্টটি নাল রিটার্ন করে। ম্যাপ DOM ম্যানিপুলেশন পরিচালনা করে।

মানচিত্রের একটি শিশু উপাদান হিসাবে চিহ্নিতকারী যোগ করুন

একটি মানচিত্রে চিহ্নিতকারী যোগ করার জন্য, Marker উপাদানটি নিচের মতো বিশেষ children প্রপ ব্যবহার করে Map উপাদানে প্রেরণ করা হবে।

<Wrapper apiKey={"YOUR_API_KEY"}>
  <Map center={center} zoom={zoom}>
    <Marker position={position} />
  </Map>
</Wrapper>

google.maps.Map অবজেক্টটি অতিরিক্ত প্রপ হিসাবে সমস্ত বাচ্চাদের কাছে পাস করার জন্য Map উপাদানটির আউটপুটে একটি ছোট পরিবর্তন করা আবশ্যক৷

টাইপস্ক্রিপ্ট

return (
  <>
    <div ref={ref} style={style} />
    {React.Children.map(children, (child) => {
      if (React.isValidElement(child)) {
        // set the map prop on the child component
        // @ts-ignore
        return React.cloneElement(child, { map });
      }
    })}
  </>
);
index.tsx

জাভাস্ক্রিপ্ট

return (
  <>
    <div ref={ref} style={style} />
    {React.Children.map(children, (child) => {
      if (React.isValidElement(child)) {
        // set the map prop on the child component
        // @ts-ignore
        return React.cloneElement(child, { map });
      }
    })}
  </>
);
index.jsx

লিঙ্ক মানচিত্র এবং আবেদন অবস্থা

onClick এবং onIdle কলব্যাকের জন্য উপরের প্যাটার্ন ব্যবহার করে, ম্যাপে ক্লিক করা বা প্যান করার মতো ব্যবহারকারীর ক্রিয়াগুলিকে সম্পূর্ণরূপে সংহত করার জন্য অ্যাপ্লিকেশনটি বাড়ানো যেতে পারে।

টাইপস্ক্রিপ্ট

const [clicks, setClicks] = React.useState<google.maps.LatLng[]>([]);
const [zoom, setZoom] = React.useState(3); // initial zoom
const [center, setCenter] = React.useState<google.maps.LatLngLiteral>({
  lat: 0,
  lng: 0,
});

const onClick = (e: google.maps.MapMouseEvent) => {
  // avoid directly mutating state
  setClicks([...clicks, e.latLng!]);
};

const onIdle = (m: google.maps.Map) => {
  console.log("onIdle");
  setZoom(m.getZoom()!);
  setCenter(m.getCenter()!.toJSON());
};
index.tsx

জাভাস্ক্রিপ্ট

const [clicks, setClicks] = React.useState([]);
const [zoom, setZoom] = React.useState(3); // initial zoom
const [center, setCenter] = React.useState({
  lat: 0,
  lng: 0,
});

const onClick = (e) => {
  // avoid directly mutating state
  setClicks([...clicks, e.latLng]);
};

const onIdle = (m) => {
  console.log("onIdle");
  setZoom(m.getZoom());
  setCenter(m.getCenter().toJSON());
};

index.jsx

এই হুকগুলি অক্ষাংশ ইনপুট দ্বারা প্রদর্শিত নিম্নলিখিত প্যাটার্ন ব্যবহার করে ফর্ম উপাদানগুলির সাথে একত্রিত করা যেতে পারে।

<label htmlFor="lat">Latitude</label>
<input
  type="number"
  id="lat"
  name="lat"
  value={center.lat}
  onChange={(event) =>
    setCenter({ ...center, lat: Number(event.target.value) })
  }
/>

অবশেষে, অ্যাপ্লিকেশনটি ক্লিকগুলিকে ট্র্যাক করে এবং এটি প্রতিটি ক্লিকের অবস্থানে মার্কার রেন্ডার করে। ক্লিক ইভেন্ট থেকে LatLng মান পাস করতে নিম্নলিখিত কোডটি position পরিবর্তনশীল ব্যবহার করে।

{clicks.map((latLng, i) => (<Marker key={i} position={latLng} />))}

কোড এক্সপ্লোর করুন

সম্পূর্ণ নমুনা কোডটি নীচের অনলাইন কোড খেলার মাঠের মাধ্যমে বা গিট সংগ্রহস্থল ক্লোন করে অন্বেষণ করা যেতে পারে।

নমুনা চেষ্টা করুন

ক্লোন নমুনা

স্থানীয়ভাবে এই নমুনা চালানোর জন্য Git এবং Node.js প্রয়োজন। Node.js এবং NPM ইনস্টল করতে এই নির্দেশাবলী অনুসরণ করুন। নিম্নলিখিত কমান্ডগুলি ক্লোন করে, নির্ভরতা ইনস্টল করে এবং নমুনা অ্যাপ্লিকেশন শুরু করে।

  git clone -b sample-react-map https://github.com/googlemaps/js-samples.git
  cd js-samples
  npm i
  npm start

sample- SAMPLE_NAME দিয়ে শুরু হওয়া যেকোনো শাখায় স্যুইচ করে অন্যান্য নমুনাগুলি চেষ্টা করা যেতে পারে।

  git checkout sample-SAMPLE_NAME
  npm i
  npm start