изменить положение пользовательского маркера на google-map-реакции - PullRequest
Новая
       28

изменить положение пользовательского маркера на google-map-реакции

0 голосов
/ 27 ноября 2018

Я использую google-map-реакции для своего проекта React, и я создал собственные маркеры.

Маркеры отображаются в правильном месте, но в верхнем левом углу:

enter image description here

Красная точка - это точное местоположениеявляется.Тем не менее, я хотел бы, чтобы хвост булавки был в этом месте.Как я могу это сделать ?

Вот моя карта и мои компоненты Маркер: 

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;

1 Ответ

0 голосов
/ 27 ноября 2018

Только что понял: все дело в стилизации.

Так что все, что мне нужно было сделать, это добавить: style={{position: 'absolute', transform: 'translate(-50%, -100%)'}}

к Маркеру.

Если вы прочитали это и столкнулись с той же проблемой, вам просто нужно изменить значения translate, чтобы адаптировать его к вашему собственному маркеру.

...