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

我已经实现了以下功能：

 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/LNG的数组，其中引脚将被丢弃），但我想我无法更新this.state.markers？ 似乎当我在函数中运行调试器时，它跳过

this.props.properties.map（…

），直接进入

arrOfAdds.map…

，它从一开始就是一个空数组，不附加任何内容，然后通过

this.props.properties.map（…

以创建正确填充的FADD

---

对于如何实现这一点相当困惑，希望得到帮助。

geocoder.geocode很可能是一个异步函数，因此这意味着您的添加代码在收到实际数据之前运行。如果您将该代码移到geocode回调中，则可能已修复（您只需执行

this.state.markers.push

并完全跳过

arrOfAdds

集合即可。（注意，闭包尚未绑定到此btw！因此最好使用箭头函数或绑定）

注意。

---

如果您的示例来自react组件，请注意，直接修改

此.state

被认为是一种不好的做法，但是应该使用

setState

。但是如果您的标记是一个可观察的数组，这其实并不重要。

geocoder.geocode很可能是一个异步函数，因此这意味着您的添加代码在您之前运行收到实际数据。如果您在geocode回调中移动该代码，它可能是固定的（您可以简单地执行

this.state.markers.push

并完全跳过

arrOfAdds

集合。（请注意，闭包尚未绑定到此btw！因此最好使用arrow函数或bind）

注意。

---

如果您的示例来自react组件，请注意，直接修改

此选项被认为是一种不好的做法。state

，但是应该使用

setState

。但是如果您的标记是一个可观察的数组，这并不重要。

Hey@mweststrate！感谢您的回答。我最初尝试了您的建议，但没有得到它o工作，因为“this”在地理代码块中未定义——您知道如何绕过它吗？是的，使用

function（results，status）{}.bind（this）

，或者在函数的开头创建一个变量

var\u this=this

，并在回调中使用

\u this

。但请确保您理解这里发生的事情！这对初学者来说非常混乱，但对于理解javascript来说非常重要：嘿@mweststrate！感谢您的回答。我最初尝试了您的建议，然后我无法让它工作，因为“this”在geocode块中未定义——您知道如何绕过它吗？是的，使用

函数（结果，状态）{}.bind（this）

，或者在函数的开头创建一个变量

var\u this=this

，并在回调中使用

\u this

。但请确保您了解这里发生的事情！这对初学者来说非常混乱，但对于理解javascript来说非常重要：