使用 google-map-react 放大和缩小时地图标记会移动

Question

我在我的 React 应用程序中添加了一张带有标记的地图，标记了固定位置，一切正常，但如果我缩小，标记会四处移动并进一步移动到它应该做的位置的右​​侧。

import GoogleMapReact from 'google-map-react';
import { Icon } from '@iconify/react'
import locationIcon from '@iconify/icons-mdi/map-marker'
import './map.css'

interface Props {
  location: {
    address: string,
    lng: number,
    lat: number
  }
}

  const LocationPin = ({ address }: Props["location"]) => (
    <div className="pin">
      <Icon icon={locationIcon} className="pin-icon" style={{ fontSize: '60px' }} />
      <p className="pin-text">{address}</p>
    </div>
  )

export default function SimpleMap(){
  const defaultProps = {
    center: {
      lat: 53.5050,
      lng: -2.0300
    },
    zoom: 12
  };


  return (
    // Important! Always set the container height explicitly
    <div style={{ height: '90vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: `${process.env.REACT_APP_GOOGLE_API_KEY}`
              }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
        
      >
      <LocationPin
        lat={defaultProps.center.lat}
        lng={defaultProps.center.lng}
        address='Stamford golf club'
      />
      </GoogleMapReact>
      
    </div>
  );
}

pin 上的 css 类只是设置它的大小。我尝试删除 css 文件以查看这是否会产生影响，但事实并非如此。

Answer 1

对我来说，问题是由于某种原因，标记对象被渲染，使其左上角固定在指定位置。这与标记的底部中间固定在该位置的惯例不同。结果是，当您缩小时，除了左上角之外，所有标记角似乎都改变了地图上的位置。通过添加解决了它：

style={{
  width: "50px",
  height: "50px",
  position: "relative",
  top: "-50px",
  left: "-25px",
}}

到我的标记 JSX 使其底部中间固定