javascript - React + google-maps-react 渲染多个制作者

Question

为什么我的代码不起作用？ 只显示一个标记 我使用 google-maps-react

const data = {"shops":[{"name":"Tienda1","location":{"lat":-34.4712726922992,"lng":-58.75985026359558}},
                            {"name":"Tienda2","location":{"lat":-34.4684599474558,"lng":-58.757007122039795}},
                            {"name":"Tienda3","location":{"lat":-34.46932677829895,"lng":-58.760215044021606}},
                            {"name":"Tienda4","location":{"lat":-34.470989653082555,"lng":-58.76484990119934}}]}
    return (
        <div>
          <Map google={window.google} initialCenter={{lat: -34.47509000000001, lng: -58.75374599999998}}  zoom={10}>
            {
              data.shops.map((x)=>(<Marker key={uuid.v4()} {...x}/>))
            }
            </Map>
        </div>
    )

Answer 1

我花了一些时间将谷歌地图与 typescript 配置集成。所以我与您分享我的代码，看看它会对您和其他人有所帮助。

import React, {
  Component
} from 'react'
import {
  Map,
  GoogleApiWrapper,
  Marker,
  InfoWindow
} from 'google-maps-react';
declare
var google: any;
interface IPageProps {
  google ? : any;
  center: ILatAndLng;
  markersOptions: any[];
  zoom: number;
  containerStyle: any;
  flightPositions ? : ILatAndLng[]
  address ? : string;
  centername ? : string
}
interface ILatAndLng {
  lat: number;
  lng: number;
}
export class MapComponent extends Component < IPageProps, any > {

    constructor(props: any) {
      super(props);
      this.state = {
        activeMarker: {},
        selectedPlace: {},
        showingInfoWindow: false
      };
    }


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

    private onInfoWindowClose = () =>
    this.setState({
      activeMarker: null,
      showingInfoWindow: false
    });

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

    };

    public render() {

      const {
        markersOptions,
        center,
        zoom,
        containerStyle,
        flightPositions,
        address
      } = this.props
      return ( <
        Map google = {
          this.props.google
        }
        onClick = {
          this.onMapClicked
        }
        initialCenter = {
          center
        }
        center = {
          {
            lat: center.lat,
            lng: center.lng
          }
        }
        /** @ts-ignore */
        flightPlanCoordinates = {
          flightPositions
        }
        zoom = {
          zoom
        }
        containerStyle = {
          containerStyle
        } >

        {
          (Array.isArray(markersOptions) && markersOptions.length > 0) ? markersOptions.map((marker: any, markerIndex: number) => {
            return ( <
              Marker key = {
                'marker ' + markerIndex
              }
              /** @ts-ignore */
              label = {
                markerIndex.toString()
              }
              name = {
                markerIndex.toString()
              }
              onClick = {
                this.onMarkerClick
              }
              position = {
                {
                  lat: +marker.latitude,
                  lng: +marker.longitude
                }
              }
              />
            )
          }) : (center.lat !== null) && < Marker
          /** @ts-ignore */
          name = {
            address
          }
          label = {
            'H'
          }
          onClick = {
            this.onMarkerClick
          }
          position = {
            {
              lat: center.lat,
              lng: center.lng
            }
          }
          />} <
          InfoWindow
          marker = {
            this.state.activeMarker
          }
          /** @ts-ignore */
          onClose = {
            this.onInfoWindowClose
          }
          visible = {
            this.state.showingInfoWindow
          } >
          <
          div >
          <
          h4 > {
            /** @ts-ignore */
            this.state.selectedPlace.name
          } < /h4> <
          /div> <
          /InfoWindow> <
          /Map>
        );
      }
    }
    const Container = GoogleApiWrapper({
      apiKey: process.env.REACT_APP_GOOGLE_MAP_KEY,
      version: "3.38",
      region: 'US'
    })(MapComponent as any) as any;
    export default Container;