Question

我的组件代码如下：

export default class map extends React.Component {
    drwmap() {
        let mapOptions = {
            zoom: zoom,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: new google.maps.LatLng(this.lat, this.lng),
            mapTypeControl: true,
            mapTypeControlOptions: {
                position: google.maps.ControlPosition.LEFT_BOTTOM
            },
            streetViewControl: true,
            minZoom: 2,
        };
        // here also this.lat and this.lng are not avilable
        this.map = new google.maps.Map(document.getElementById('mapdiv'), mapOptions);
    }
    loadmap(event) {
        geocoder.geocode({'address': this.place}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                let lat = results[0].geometry.location.lat();
                let lng = results[0].geometry.location.lng();
                // here this is window looks google map modified scope and I dont have access to this of react
                this.lat = lat;
                this.lng = lng;
                this.drwmap();
            }
        });
    }
    componentDidMount() {
        this.loadmap();
    }
}

当我在reactjs中使用Google地图进行地理编码时，我将其作为窗口值。看起来googlemaps正在用其他一些值覆盖它，并且反应的范围不可用。

如何使其可用，以便我可以在组件中使用公共变量？

Answer 1

我在反应中使用箭头功能解决了这个问题。

this.geocoder.geocode({'address': this.place},(results, status) => {
/ / here this is available as component
});

此值会在react组件中覆盖Google地图

1 个答案: