如何使用 for 循环在 React 中的地图上渲染标记？

Posted 2023-02-23

【中文标题】如何使用 for 循环在 React 中的地图上渲染标记？

【英文标题】：How can I render markers on a map in React using a for loop?

【发布时间】：2019-01-07 17:33:35

【问题描述】：

我正在试验 React，我想在地图上渲染一些标记（我正在使用 Google Maps API）。 现在，如果我对标记进行硬编码（在示例中，5 个标记，每个标记都有不同的坐标、名称和描述，如下面的位置数组中所示），一切都很好。 但是，如果我想遍历数组并在不进行硬编码的情况下渲染它们怎么办？我在 render() 之前定义了 renderMarkers 函数。 任何帮助，将不胜感激。谢谢！

/* Main component state */
state = 
    showingInfoWindow: false,
    activeMarker: ,
    selectedPlace: ,
    mapReady: true,
    desc: '',
    animation: null,
    locations: 
  [
   
    "locationName": "name1",
    "position": '"lat": "lat1", "lng": "lng1"',
    "desc": "desc1"
  ,
  
    "locationName": "name2",
    "position": '"lat": "lat2", "lng": "lng2"',
    "desc": "desc2"
  ,
  
    "locationName": "name3",
    "position": '"lat": "lat3", "lng": "lng3"',
    "desc": "desc3"
  ,
  
    "locationName": "name4",
    "position": '"lat": "lat4", "lng": "lng4"',
    "desc": "desc4."
  ,
  
    "locationName": "name5",
    "position": '"lat": "lat5, "lng": "lng5"',
    "desc": "desc5."
  
 ]
;

/* Function to render the markers, each with their relevant info taken from the state.locations array, on the map */
renderMarkers = () => 
for (let i = 0; i < this.state.locations.length; i++) 
  return <Marker
      onClick =  this.onMarkerClick 
      title =  this.state.locations[i].locName 
      position =  JSON.parse(this.state.locations[i].position) 
      desc =  this.state.locations[i].desc 
      animation =  this.state.animation[i] 
      name =  this.state.locations[i].locName  />
   
 

【问题讨论】：

使用map()函数映射render()中的数组，这个结构会在locations数组更新时重新渲染。

感谢@A.Larsson 的回复。由于我对此非常陌生，可以在 render() 函数内部声明吗？ Here 说最好不要。如果我在类中声明，然后使用 在返回内部调用它会怎样？

【参考方案1】：

使用map 函数创建一个标记数组。 renderMarkers 函数应该放在 render 函数之外。否则，每次更改组件状态时都会重新创建 renderMarkers，因为每次状态更改（性能下降）都会调用 render。

renderMarkers() 
  return this.state.locations.map((location, i) => 
    return <Marker
      key= i 
      onClick =  this.onMarkerClick 
      title =  location.locName 
      position =  JSON.parse(location.position) 
      desc =  location.desc 
      animation =  this.state.animation[i] 
      name =  location.locName  />
  )


render() 
  return <div> this.renderMarkers() </div>

【讨论】：

嗨@jordan，感谢您的回答。我尝试按照您的方法进行操作，这很有意义，但我得到了与animation = this.state.animation[i] 相关的“TypeError：无法读取 null 的属性 '0'”。如果你想帮我解决这个问题，我将整个组件代码保存在 bin 上。非常感谢！

因为动画是null。正如我所看到的，您对所有标记使用相同的动画。所以你可以按如下方式传递它：animation = this.props.google.maps.Animation.DROP 它应该可以工作。这个问题也与渲染一组标记有关，所以如果我的回答对你有帮助 - 你可以接受。谢谢。

很高兴我帮助了你！