更改自定义标记在 google-map-react 上的位置

Question

我正在为我的 React 项目使用 google-map-react，并且我创建了自定义标记。

标记呈现在正确的位置，但从左上角开始：

红点就是确切位置。但是，我希望图钉的尾部位于那个位置。我怎样才能做到这一点？

这是我的地图和标记组件：

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import MapMarker from './MapMarker';

class MapBlock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedMarker: null
    };
  }

  static defaultProps = {
    center: {
      lat: 50.6304916,
      lng: 3.0526526
    },
    zoom: 14
  };

  render() {
    return (
      // Important! Always set the container height explicitly
      <div style={{ flex: '0 0 35rem', height: '100vh', position: 'sticky', top: '0'}}>
        <div className="" style={{ height: '100%', width: '100%', position: 'absolute', top: '0px', left: '0px' }}>
          <GoogleMapReact
            bootstrapURLKeys={{ key: "" }}
            defaultCenter={this.props.center}
            defaultZoom={this.props.zoom}
          >
            {this.props.meals.map(m => {
              return (
                <MapMarker
                  lat={m.restaurant.latitude}
                  lng={m.restaurant.longitude}
                  key={m.restaurant.id}
                  meal={m}
                  hoveredRestaurant={this.props.hoveredRestaurant}
                />
              )
            })}
          </GoogleMapReact>
        </div>
      </div>
    );
  }
}

export default MapBlock;

标记组件：

import React from 'react';
import ForkTKM from '../static/images/marker_fork_orange_border_3mm.svg';

class MapMarker extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <img src={ForkTKM}
              height= "30rem"
              width= "20rem"
              alt="map marker"
        />
    </div>
    )
  }
}

export default MapMarker;

Answer 1

刚刚明白：一切都与样式有关。

所以我所要做的就是添加： style={{position: 'absolute', transform: 'translate(-50%, -100%)'}}

到标记。

如果您阅读本文并遇到同样的问题，您只需更改 translate 的值以使其适应您自己的标记。

更改自定义标记在 google-map-react 上的位置

change position of custom marker on google-map-react

javascript

google-maps

reactjs

google-map-react