vue.js - vuejs 这在我的事件监听器中是未定义的

Question

我尝试在 vuejs 中制作一个谷歌地图，其中 map 中心的值显示在我的 View 中。

为此，我创建了我的标记并尝试使用 this.marker = map.center.lng(); 或 this.setMarkerLng(map.center.lng( )); 在我的方法 Initmap 的事件监听器中，但它们都不起作用。我收到消息:

this is undefined

在事件监听器之外，一切正常。

你能帮忙吗？

export default {
        mounted: function () {
            this.initMap();
        },
        data() {
            return {
                marker: {
                    lng : 'latitude',
                    lat: 'longitude'
                        }
            }
        },
        methods: {
            ///google map init
            initMap() {
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: 48.587536, lng: 7.751440},
                    zoom: 13
                });

                this.setMarkerLat(map.center.lat());
                this.setMarkerLng(map.center.lng());

                ///Listner
                autocomplete.addListener('place_changed', function () {

                    ///call method bug
                    this.setMarkerLat(map.center.lat());
                    this.setMarkerLng(map.center.lng());

                    infowindow.close();
                      this.marker.lat = map.center.lat();
                      this.marker.lng = map.center.lng();
                    marker.setVisible(false);
                    var place = autocomplete.getPlace();
                    if (!place.geometry) {

                        window.alert("No details available for input: '" + place.name + "'");
                        return;
                    }

                    // If the place has a geometry, then present it on a map.
                    if (place.geometry.viewport) {
                        map.fitBounds(place.geometry.viewport);
                    } else {
                        map.setCenter(place.geometry.location);
                        map.setZoom(17);  // Why 17? Because it looks good.
                    }
                    marker.setPosition(place.geometry.location);
                    marker.setVisible(true);


                    var address = '';
                    if (place.address_components) {
                        address = [
                            (place.address_components[0] && place.address_components[0].short_name || ''),
                            (place.address_components[1] && place.address_components[1].short_name || ''),
                            (place.address_components[2] && place.address_components[2].short_name || '')
                        ].join(' ');
                    }
            },
            setMarkerLng: function(lng) {
                this.marker.lng = lng;
            },
            setMarkerLat: function(lat){
                this.marker.lat = lat;
            }
        }
    }

Answer 1

尝试使用箭头函数 ()=> 以便能够像这样访问 this 范围:

autocomplete.addListener('place_changed', ()=> {
  ...
 }