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上的位置

1 个答案: