Добавление нескольких маркеров на карту React

Question

Я пытаюсь добавить несколько маркеров на свою карту Google, но не знаю, как начать, поскольку я новичок в React. Я хочу создать массив маркеров и отобразить их все на карте. Как мне это сделать?

Код на данный момент:

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';

const mapStyles = {
  width: '100%',
  height: '100%'
};

export class MapContainer extends Component {
  state = {
    showingInfoWindow: false,  
    activeMarker: {},          
    selectedPlace: {}          
  };

  onMarkerClick = (props, marker, e) =>
  this.setState({
    selectedPlace: props,
    activeMarker: marker,
    showingInfoWindow: true
  });

  onClose = props => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  };

  render() {
    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={{ lat: 49.166590, lng: -123.133569 }}
      >
        <Marker
          onClick={this.onMarkerClick}
          name={''}
        />

        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
          <div>
            <h4>{this.state.selectedPlace.name}</h4>
          </div>
        </InfoWindow>
      </Map>
    );
  }
}

Я вижу, что

<Marker
   onClick={this.onMarkerClick}
   name={''}
/>

отображает маркер, но как мне сделать его в al oop для отображения массив маркеров?

Answer 1

Добро пожаловать в мир React. Чтобы отобразить массив компонентов, вы можете отобразить свой массив, используя array.prototype.map () . Так, например,

const myArray = ['hello', 'world']
  return (
    <div>
      {myArray.map((element, index) => 
        <span key = {index}>{element}</span>}
    </div>
   )
// equivalent to
// <div>
//   <span key = {0}>hello</span>}
//   <span key = {1}>world</span>}
// </div>

Обратите внимание , что важно предоставить уникальное свойство key для узла root для каждого элемента. См. этот вопрос и этот учебник для получения дополнительной информации о рендеринге массивов. Также см. Документацию по маркеру

Итак, для вашего случая , чтобы дать пример, я просто добавил массив markers в функцию рендеринга.

render() {
let markers = [ // Just an example this should probably be in your state or props. 
  {
    name: "marker1",
    position: { lat: 49.17655, lng: -123.138564 }
  },
  {
    name: "marker2",
    position: { lat: 49.16659, lng: -123.113569 }
  },
  {
    name: "marker3",
    position: { lat: 49.15659, lng: -123.143569 }
  }
];
return (
  <Map
    google={this.props.google}
    zoom={14}
    style={mapStyles}
    initialCenter={{ lat: 49.16659, lng: -123.133569 }}
  >
    {markers.map((marker, index) => (
      <Marker
        key={index} // Need to be unique
        onClick={this.onMarkerClick}
        name={marker.name}
        position={marker.position}
      />
    ))}
    <InfoWindow
      marker={this.state.activeMarker}
      visible={this.state.showingInfoWindow}
      onClose={this.onClose}
    >
      <div>
        <h4>{this.state.selectedPlace.name}</h4>
      </div>
    </InfoWindow>
  </Map>
);
}

Вот пример песочницы кода с маркерами в состоянии. (просто добавьте ключ API карт в maps.js:4, чтобы он загружал карты)