我开发了一个日托应用程序，所以我想在谷歌 map 上显示日托位置.我将Google Maps与React应用程序集成.加载应用程序时，它正确地显示了位置.但是，当拖动或zoom 时，我的位置也会移动.位置应该始终保持不变.我使用node.js express作为后端

Here's a video of the issue

https://app.screencastify.com/v3/watch/DltGBIYDwrZY0xlJw6v9

This is my code

import React, { useState, useEffect } from "react";
import GoogleMapReact from 'google-map-react';
import { Icon } from "@iconify/react";
import locationIcon from "@iconify/icons-mdi/map-marker";

const LocationPin = ({ name }) => (
    <div className="pin">
        <Icon icon={locationIcon} className="pin-icon" />
        <p className="pin-text">{name}</p>
    </div>
);

const Map = ({ daycares }) => {
    const [latitude, setLatitude] = useState(43.77887);
    const [longitude, setLongitude] = useState(-79.17282);

    useEffect(() => {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                setLatitude(position.coords.latitude);
                setLongitude(position.coords.longitude);
            },
            (error) => {
                console.error(error);
            }
        );
    }, []); // Empty dependency array means this effect runs only once after the initial render

    const renderMap = () => {
        if (!daycares || daycares.length === 0) {
            return null; // Return early if daycares is empty or undefined
        }

        return (
            <div style={{ height: "80vh", width: "100%" }}>
                <GoogleMapReact
                    bootstrapURLKeys={{ key: "AIzaSyAzEQgX_hi-_Qnv6aWWIQDAdcLYnFPqQSQ" }}
                    defaultCenter={{
                        lat: latitude,
                        lng: longitude
                    }}
                    defaultZoom={12}
                >
                    {daycares.map((daycare) => (
                        <LocationPin
                            key={daycare.id}
                            lat={parseFloat(daycare.latitude)}
                            lng={parseFloat(daycare.longitude)}
                            name={daycare.childcare_name}
                        />
                    ))}
                </GoogleMapReact>
            </div>
        );
    };

    return (
        <div>
            {renderMap()}
        </div>
    );
};

export default Map;

const LocationPin = ({ lat, lng, name }) => (
  <div className="pin" style={{ position: 'absolute', transform: 'translate(-50%, -50%)' }}>
    <Icon icon={locationIcon} className="pin-icon" />
    <p className="pin-text">{name}</p>
  </div>
);

export default LocationPin;

位置应该始终保持不变

我的模拟数据:

{
  childcare_name: "East Side Preschool",
  address: "458 Fairall Street",
  city: "Ajax",
  region: "Ontario",
  postalcode: " L1S 1R6",
  country: "CANADA",
  latitude: "43.75991",
  longitude: "-79.18827",
  owner_name: "Jessica Lee",
  age_range: "2-6",
  years: "4",
  infant_capacity: "8",
  toddler_capacity: "12",
  preschool_capacity: "18",
  contact_phone: "555-9012",
  contact_email: "jessica@example.com",
},
{
  childcare_name: "Kepalen Angelic Child Care Daycare",
  address: "1301 Neilson Rd",
  city: "Scarborough",
  region: "Ontario",
  postalcode: "M1B 3C2",
  country: "Canada",
  latitude: "43.80716",
  longitude: "-79.21856",
  owner_name: "Nabhila",
  age_range: "0-6",
  years: "3",
  infant_capacity: "15",
  toddler_capacity: "20",
  preschool_capacity: "25",
  contact_phone: "555-1357",
  contact_email: "nabila@example.com",
},