为什么我看不到Google地图上的任何标记有反应？

编程问答 2022-08-11

问题描述

我一直在构建启用了Google Maps API的应用程序的前端。我想让用户单击地图以添加标记，并将其存储到数组中；但是，当我在Google Map标记的onClick中实现了添加标记功能后，标记将无法呈现。

我在实现React的添加标记功能时遇到了很多困难，并且看了几本教程，但似乎找不到解决方法。任何帮助将不胜感激！

    const options = {
        styles: mapStyles,disableDefaultUI: true,zoomControl: true,}

    var markersArray = [];
    function addMarker(event){
            let marker = new window.google.maps.Marker({
            position: event.latLng,time: new Date(),draggable: true
        });
        markersArray.push(marker);
    }


    const Map = withScriptjs(withGoogleMap(props =>
        <GoogleMap
          defaultZoom={8}
          defaultCenter={{ lat: this.state.mapPosition.lat,lng: this.state.mapPosition.lng }}
          options={options}
          onClick={(event) => {
            console.log(event);
            console.log(markersArray);
            addMarker(event);
        }}
        >

        {markersArray.map((marker) =>(
            <Marker
                key={marker.time.toISOString()}
                position={{lat: marker.lat,lng: marker.lng }}
            />
        ))}

        <AutoComplete
            style={{width: "100%",height:'40px'}}
            types={['(regions)']}
            onPlaceSelected={this.onPlaceSelected}
        />

        </GoogleMap>
      ));

我相信问题出在此，但我不确定如何使它起作用。

        {markersArray.map((marker) =>(
            <Marker
                key={marker.time.toISOString()}
                position={{lat: marker.lat,lng: marker.lng }}
            />
        ))}

解决方法

markersArray是一个纯数组。当您执行addMarker(event);时，您并没有更新组件的状态，它只是一个简单的数组。因此，可能React并未意识到这一变化。如果您使用的是钩子，则可以使用这样的标记创建状态

const [markers,setMarkers] = useState([])

使用该markers数组呈现<Marker />，然后在您的事件上添加标记

onClick={(event) => {
  setMarker(previousMarkers => previousMarkers.concat([event]))
}

这将导致使用新值markers重新渲染，您应该可以看到它们。

如果它不是功能组件，而是类，则相同，但是您可以在类的状态下定义标记

constructor(props) { 
  super(props)
  this.state = { markers: [] }
  this.addMarker = this.addMarker.bind(this)

}

// function class below
addMarker(marker) {
  this.setState(previousState => previousState.concat([marker])
}

在您遇到的情况下，您会致电this.addMarker(marker)

google-mapsjavascriptmarkerreactjsreactjs