प्रतिक्रिया गूगल मैप्स पाने की सीमा Polyline

Question 1

मैं गया के साथ खेलने के आसपास Strava डेवलपर एपीआई के एक बिट किया गया है और निर्माण एक बुनियादी प्रतिक्रिया करने के लिए एप्लिकेशन लाने के soem Starva गतिविधियों और प्रदर्शन यह एक सूची में. रेपो पाया जा सकता है यहाँ.

मैं एक नक्शा है कि renders गतिविधि का मार्ग में इस घटक है ।

const StravaMap = withScriptjs(
  withGoogleMap(({ zoom, activity }: StravaMapProps) => {
    const center = {
      lat: activity.start_latitude,
      lng: activity.start_longitude,
    };

    const path = activity.map.summary_polyline
      ? createPath(polyline.decode(activity.map.summary_polyline))
      : [];

    return (
      <GoogleMap
        defaultZoom={zoom}
        defaultCenter={center}
        defaultOptions={mapOptions}
      >
        <Marker position={center} />
        {path.length > 0 && (
          <Polyline options={polyLineOptions} path={path} visible />
        )}
      </GoogleMap>
    );
  }),
);

स्रोत फ़ाइल यहाँ.

बहुभुज renders ठीक है, लेकिन अब मैं कर रहा हूँ कोशिश कर रहा है बाहर आंकड़ा करने के लिए मैं कैसे कर सकते हैं ज़ूम फिट करने के लिए वें epolyline में सीमा.

मैं हो सकता है mising soemthing लेकिन मैं नहीं है कि कैसे एक स्पष्ट विचार की पकड़ पाने के लिए polyline उदाहरण प्राप्त करने के लिए सीमा या नक्शा सेट करने के लिए सीमा.

मैं कैसे पता करने के लिए बफर poluyline पथ पर आधारित लेकिन एक बार मैंने किया है thay और सीमा, मैं कैसे कर सकते हैं निर्धारित सीमा का उपयोग कर इस पर प्रतिक्रिया गूगल मानचित्र पुस्तकालय?

धन्यवाद,

Question 2

के साथ एक छोटे से अधिक खुदाई और अनुसंधान मैं ने पाया है एक व्यावहारिक समाधान मैं हिस्सा हूँ दूसरों के लाभ के लिए:

मैंने पाया इस पोस्ट पर GitHub

का उपयोग कर के मैंने बनाया है कि एक सहायक समारोह बनाने के लिए google.maps.LatLngBounds

export const createBounds = (path: IPoint[]): google.maps.LatLngBounds => {
  const bounds = new window.google.maps.LatLngBounds();
  path.map((p: IPoint) => bounds.extend(p));
  return bounds;
};

मेरे StravaMap घटक मैं तो पास के रास्ते से हम किया था के लिए इस समारोह और सीमा इस तरह:

const bounds = createBounds(path);

मैं तो कर सकते हैं कि पारित करने के लिए GoogleMap घटक का उपयोग रेफरी की तरह:

  ref={(map) => map && map.fitBounds(bounds)}

और है कि सफलतापूर्वक सेट मानचित्र बाध्य जब गतिविधि भरी हुई है.

loan.burger · Answer 1 · 2021-11-24T05:33:14

के साथ एक छोटे से अधिक खुदाई और अनुसंधान मैं ने पाया है एक व्यावहारिक समाधान मैं हिस्सा हूँ दूसरों के लाभ के लिए:

मैंने पाया इस पोस्ट पर GitHub

का उपयोग कर के मैंने बनाया है कि एक सहायक समारोह बनाने के लिए google.maps.LatLngBounds

export const createBounds = (path: IPoint[]): google.maps.LatLngBounds => {
  const bounds = new window.google.maps.LatLngBounds();
  path.map((p: IPoint) => bounds.extend(p));
  return bounds;
};

मेरे StravaMap घटक मैं तो पास के रास्ते से हम किया था के लिए इस समारोह और सीमा इस तरह:

const bounds = createBounds(path);

मैं तो कर सकते हैं कि पारित करने के लिए GoogleMap घटक का उपयोग रेफरी की तरह:

  ref={(map) => map && map.fitBounds(bounds)}

और है कि सफलतापूर्वक सेट मानचित्र बाध्य जब गतिविधि भरी हुई है.

प्रतिक्रिया गूगल मैप्स पाने की सीमा Polyline

सवाल

सबसे अच्छा जवाब

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में