左右拖动Google地图时我的位置也会移动

Question

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

请找到视频

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

这是我的代码

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: '东区幼儿园', 地址：'458 Fairall 街'， 城市: '阿贾克斯', 地区:'安大略省', 邮政编码：'L1S 1R6', 国家：“加拿大”， 纬度：“43.75991”， 经度:"-79.18827", Owner_name: '杰西卡·李', 年龄范围：'2-6'， 年：“4”， 婴儿容量：'8'， 幼儿容量：'12'， 学前班容量：'18'， 联系电话：'555-9012'， contact_email: '[电子邮件受保护]' }, { childcare_name: "Kepalen Angelic 托儿所", 地址：“尼尔森路 1301 号”， 城市：“斯卡伯勒”， 地区：“安大略省”， 邮政编码：“M1B 3C2”， 国家：“加拿大”， 纬度：“43.80716”， 经度：“-79.21856”， 所有者名称：“纳比拉”， 年龄范围：“0-6”， 年：“3”， 婴儿容量：“15”， 幼儿容量：“20”， 学前班容量：“25”， 联系电话：“555-1357”， contact_email：“[电子邮件受保护]” }

Answer 1

正如我对您的问题的评论所建议的那样，您应该使用支持高级标记的不同库。由于高级标记允许您将标记纯粹作为 HTML 元素加载。

在这种情况下，我建议您使用

@vis.gl/react-google-maps

及其各自的

<AdvancedMarker>

组件。

要实现它，您应该按照上述库的文档了解如何加载地图和高级标记。

• 入门：https://visgl.github.io/react-google-maps/docs/get-started
• 高级标记组件：https://visgl.github.io/react-google-maps/docs/api-reference/components/advanced-marker

然后要将其与您的数据一起使用，您应该在加载标记时使用

array.map()

。它将迭代您的数据并使用这些数据传递到您的 AdvancedMarker 组件渲染中。你的代码应该是这样的：

import React from "react";
import { createRoot } from "react-dom/client";

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

const API_KEY =
  globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);

const App = () => {
  var childCareData = [
    {
      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: "[email protected]",
    },
    {
      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: "[email protected]",
    },
  ];
  return (
    <APIProvider apiKey={API_KEY} libraries={["marker"]}>
      <Map
        mapId={"bf51a910020fa25a"}
        defaultZoom={12}
        defaultCenter={{ lat: 43.77887, lng: -79.17282 }}
        gestureHandling={"greedy"}
        disableDefaultUI
      >
        {childCareData &&
          childCareData.map((childCare, key) => {

            /* Convert your longitude and latitude into a float first
             since your data stored it as a string. */

            const floatLat = parseFloat(childCare.latitude);
            const floatLng = parseFloat(childCare.longitude);
            return (
              <AdvancedMarker
                key={key}
                position={{ lat: floatLat, lng: floatLng }}
                title={"AdvancedMarker with custom html content."}
              >
                <div
                  style={{
                    width: 16,
                    height: 16,
                    position: "absolute",
                    background: "#1dbe80",
                    border: "2px solid #0e6443",
                    borderRadius: "50%",
                    transform: "translate(-50%, -50%)",
                  }}
                >
                  <h3
                    style={{
                      padding: 12,
                    }}
                  >
                    {childCare.childcare_name}
                  </h3>
                </div>
              </AdvancedMarker>
            );
          })}
      </Map>
    </APIProvider>
  );
};

export default App;

export function renderToDom(container: HTMLElement) {
  const root = createRoot(container);

  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  );
}

然后这应该按预期工作，而不会出现移动地图时位置跟随的问题。

这里有一个概念验证代码和框，您可以自己尝试和检查。