Как получить ссылку на узел dom маркера карты Google в реакции? - PullRequest
Новая
       27

Как получить ссылку на узел dom маркера карты Google в реакции?

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

Используя пакет google-maps-реакции npm, я могу получить ссылку на узел dom карты, например: 

loadMap() {

  const maps = this.props.google.maps;
  const mapRef = this.refs.map;       <---- ref set in render function on dom node
  const node = ReactDOM.findDOMNode(mapRef);  <--- the dom node
  ...
  this.map = new maps.Map(node, mapConfig);
  this.mapRef = mapRef;
}

Это довольно просто, потому что mapref установлен в методе рендеринга: 

render() {
  return (
    <div style={{ height: mapHeight }} ref="map">
    ...

И затем это используется для установки node, а затем это используется для обновления карты.

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

 this.marker = new google.maps.Marker({someOptions});  <----- no dom node needed

Я хочу сделать это, потому что мне нужно динамически менять значок маркера на основекакое-то значение в моем магазине редуксов.Я попытался изменить значок с помощью реквизита (см. Ниже), но он каким-то образом предотвращает перетаскивание маркера значка, даже если для параметра draggable установлено значение true.

     return (
      <Marker 
        key={foo} 
        position={latLngPos}
        icon={ active ? activeIcon : defaultIcon }
        draggable={true}
        onDragstart={() => { return this.handleMapMarkerDragStart();}} 
        onDragend={() => { return this.handleMapMarkerDrop();}} 
      />);

Я подозреваю, что все происходит странно, потому что, чтобы заставить API Google Maps работать с реагировать, компоненты должны иметь дело с фактическими dom-узлами, а не с виртуальными dom-узлами.

Anyпонимание этого будет высоко ценится.

1 Ответ

0 голосов
/ 03 декабря 2018

Относительно

Я хочу сделать это, потому что мне нужно динамически менять значок маркера на основе некоторого значения в моем магазине редуксов.Я попытался изменить значок с помощью реквизита (см. Ниже), но он каким-то образом предотвращает перетаскивание маркера значка, даже если для параметра draggable установлено значение true.

В следующем примере показано, как:

  • установить маркер как перетаскиваемый
  • установить пользовательский значок для маркера

Пример 

const handleDragEnd = (props, marker, event) => {
  console.log(event.latLng);
};

const defaultIcon =
  "http://maps.google.com/mapfiles/kml/pushpin/blue-pushpin.png";
const activeIcon =
  "http://maps.google.com/mapfiles/kml/pushpin/pink-pushpin.png";

const MapWrapper = props => {
  return (
    <div className="map-container">
      <Map
        google={props.google}
        className={"map"}
        zoom={4}
        initialCenter={{ lat: -24.9923319, lng: 135.2252427 }}
      >
        {props.places.map((place, i) => {
          const active = i % 2 === 0;
          return (
            <Marker
              icon={active ? activeIcon : defaultIcon}
              key={place.id}
              position={{ lat: place.lat, lng: place.lng }}
              draggable={true}
              onDragend={handleDragEnd}
            />
          );
        })}
      </Map>
    </div>
  );
};

Примечание: Marker компонент на данный момент не поддерживает onDragstart прослушиватель событий в библиотеке google-maps-react, но его можно подключить непосредственно к объекту Маркер Google Maps

Демо

...