Question

我试图在vuejs中制作一个Google地图，其中在视图中显示地图中心的值。

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

这是未定义的

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

你能帮忙吗？

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', ()=> {
  ...
 }

vuejs，这在我的eventListner中未定义

1 个答案: