react-google-map 中的标记在道具更改后不呈现

Question

我无法处理那个问题。我得到了对象位置。有些对象具有关于位置、功能和图标颜色的信息。我把它发给地图。一开始它显示正常，但是当我过滤数组并发送新数组以显示它不呈现新数组时。我将状态添加到 class 并对其进行设置 - 检查后我在控制台中看到一切都可以进行更改 - 但标记仍然相同。请帮忙

locations 也是父无状态组件中的一个状态。

地图组件

import React, {Component} from 'react'
import GoogleMapReact from 'google-map-react'
import MarkerClusterer from '@google/markerclusterer'

export default class GoogleMapContainer extends Component {

state = {
locationsToShow:  null
}

componentDidMount () {
const script = document.createElement('script')
script.src = 'https://developers.google.com/maps/documentation/javascript/examples     /markerclusterer/markerclusterer.js'
script.async = true
document.body.appendChild(script)
}
componentDidUpdate(prevProps) {
if (this.props.locations !== prevProps.locations) {
 this.setState({locationsToShow: this.props.locations})
}
}

static defaultProps = {
center: {
  lat: 59.95,
  lng: 30.33
 },
 zoom: 11
}

render () {
const setGoogleMapRef = (map, maps) => {
  this.googleMapRef = map
  this.googleRef = maps
  let locations = this.props.locations
    console.log('locations w propsie')
 
  let markers = this.state.locationsToShow &&   this.state.locationsToShow.map((location) => {
    let item = new this.googleRef.Marker({position: location.position, icon:  location.icon })
    google.maps.event.addListener(item, 'click', location.fn)
    return item
  })
  console.log('markerow jest')
  let markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
    gridSize: 60,
    minimumClusterSize: 2
  })
}

return (
  <GoogleMapReact
    bootstrapURLKeys={{key: `apiKey`}}
    yesIWantToUseGoogleMapApiInternals
    onGoogleApiLoaded={({map, maps}) => setGoogleMapRef(map, maps)}
    defaultCenter={{lat: 52.193275, lng: 20.930372}}
    defaultZoom={7}
    options={{streetViewControl: true}}
  />
)
 }
}

父组件元素

let locationsList = filteredData.map((el) => {
            const lati = Number(el.location.latitude).toFixed(6)
        const longi = Number(el.location.longitude).toFixed(6)
            return {position: { lat: Number(lati), lng: Number(longi) }, icon: typeOfIcon(el.status), fn: ()=>{
                setIsOpen(true)
                setData(el)
                } }
          })
         setLocations(locationsList)

Answer 1

setGoogleMapRef 仅在实例化地图组件时调用我猜（你想要这个）。因此您需要访问地图并在 setGoogleMapRef 回调之外的渲染函数中更新您的位置。

类似于以下内容：

render () {
  const setGoogleMapRef = (map, maps) => {
    this.googleMapRef = map
    this.googleRef = maps
    this.markerCluster = //...
  };

  if (this.googleMapRef) {
    let locations = this.props.locations
    console.log('locations w propsie')
 
    let markers = this.state.locationsToShow &&   
    this.state.locationsToShow.map((location) => {
    let item = new this.googleRef.Marker({position: location.position, icon:  location.icon })
    google.maps.event.addListener(item, 'click', location.fn)
    return item
    })
    console.log('markerow jest')
    // update marker cluster
   }

  return //...;
}

react-google-map 中的标记在道具更改后不呈现

Markers in react-google-map doesnt render after change in props

javascript

reactjs

google-maps

render