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

Question

我一直在构建启用了 google 地图 API 的应用程序的前端。我想让用户点击地图添加标记，并将其存储到一个数组中；然而，在我为 google 地图标签的 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 }}
            />
        ))}

Answer 1

markersArray 是一个普通数组。当您执行 addMarker(event); 时，您并没有更新组件的状态，它只是一个普通数组。所以 React 可能没有意识到这种变化。如果你使用钩子，你可以像这样用你的标记创建一个状态

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

使用 markers 数组渲染 <Marker />，然后在您的事件中添加标记

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

这将导致 re-render 的新值为 markers，您应该能够看到它们。

如果它不是一个功能组件并且它是 classes，它是一样的，但是你会在你的 class' state

中定义标记

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 地图上看不到任何标记有反应？

Why can't I see any markers on google maps react?

javascript

reactjs

google-maps

marker