react + google-maps-react渲染多个生成器

Question

为什么我的代码不能工作？只显示一个我使用的标记-地图-反应

​

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

我花了一些时间将google地图与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;

Answer 2

确保您正确使用了示例here中所述的接口。您必须使用withGoogleMap和GoogleMap创建地图。

此外，每个标记都使用键position而不是location来定位地图中的位置。

[{
  position: {
    lat: 25.0112183,
    lng: 121.52067570000001,
  },
  key: `Taiwan`,
  defaultAnimation: 2,
}, ...]

一旦你做了这些更改，你的代码就应该可以工作了。

Answer 3

导出默认类MapRender扩展了组件{

renderMarker(marker, index) {
    return (<Marker
        key={index}
        zIndex={index}
        position={new window.google.maps.LatLng(
            marker.lat,
            marker.lng
        )}
    />)
}

render() {
    //multiMarkers will contain all Markers like a array simple 
    var multiMarkers = []
    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 } }]
    }

    // After push all Markers in multiMarkers need only insert it in the map
    data.shops.map((marker, index) => {
        multiMarkers.push(this.renderMarker(marker, index))
        return null
    })
    return (
        <div>
            <Map google={window.google}
                initialCenter={{
                    lat: -34.47509000000001,
                    lng: -58.75374599999998
                }}
                zoom={10}>
                {multiMarkers}
            </Map>
        </div>
    )
}

}