如何将 lat/lng 中的 react-google-maps 附加到 this.state.markers

Question

我已经实现了：

 populateLocations() {
    var arrOfAdds = [],
        geocoder = new google.maps.Geocoder()

    this.props.properties.map(function(property, i) {
      if (geocoder) {
        geocoder.geocode({
          'address': property.street
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
             // debugger
             arrOfAdds.push({
               position: {
                 lat: results[0].geometry.location.lat(),
                 lng: results[0].geometry.location.lng(),
               },
               key: i,
               defaultAnimation: 2,
             })
            }
        });
      }
    }, this)

   arrOfAdds.map(function(add, i) {
     this.state.markers.push(add)
   })

    console.log('arrOfAdds', arrOfAdds)
    console.log('this.state.markers', this.state.markers)
  }

我正在尝试使用 arrOfAdds 数组中的任何内容来基本上更新 this.state.markers（一个包含我所有 lat/lngs 的数组，其中的引脚将被删除），但我想我可以'不更新 this.state.markers？似乎当我运行函数中的调试器时，它跳过 this.props.properties.map(... 并直接进入 arrOfAdds.map...，它从一开始就是一个空数组，不附加任何内容然后通过 this.props.properties.map(... 创建一个正确填充的 arrOfAdds。

对如何执行此操作感到很困惑，希望得到帮助。

Answer 1

geocoder.geocode 很可能是一个异步函数，所以这意味着您的附加代码是运行在收到实际数据之前。如果您将该代码移动到地理编码回调中，它可能已修复（您可以简单地执行 this.state.markers.push 并完全跳过 arrOfAdds 集合。（请注意，闭包尚未绑定到此 btw！所以最好使用箭头函数或绑定)

N.B。如果您的示例来自 React 组件，请注意直接修改 this.state 被认为是一种不好的做法，但应该使用 setState。但如果你的标记是一个可观察的数组，那其实并不重要。

如何将 lat/lng 中的 react-google-maps 附加到 this.state.markers

How to append lat/lng in react-google-maps to this.state.markers

javascript

google-maps

reactjs

mobx

mobx-react