需要在Vue组件中动态刷新映射

Question

我有一个可以执行以下操作的工作组件：

• 通过created() =＆gt;中的全局总线方法从兄弟输入组件接收字符串的工作原理
• 通过geoDecoding() =＆gt;将字符串处理为lat / lng坐标的工作原理
• 通过geoDecoding() =＆gt;解析承诺结果坐标，设置数据的工作原理
• 在事件触发后更新数据showMap() =＆gt; 不起作用 :(

  

请注意我有带有硬编码默认值的道具（已注释掉），只是用这些值检查showMap()，并且它有效。

• 我在showMap()上设置了一个调试器，我注意到没有设置纬度和经度，这很奇怪，因为我在created()调用geoDecoding()
下设置它们

我想让showMap()刷新每个被激活的事件，它会从this.latLong.latitude / this.latLong.longitude获取刷新的数据（）并根据这些新值重新实例化地图。在这个当前点，并且在此处粘贴了此代码实例，我得到showMap()来实例化地图，但是地图是空的sibce它没有从geoDecoding()接收到lat / lng。

代码：

<template>
    <div class="map-container" :id="theMap"></div>
</template>

<script>
    import { Bus } from "../main";

    export default {
        name: "GoogleMapsContainer",
        data() {
            return {
                theMap: "map-for-" + this.name,
                location: '',
                latLong: {
                    latitude: '',
                    longitude: ''
                },
            }
        },
        props: {
            name,
            // 'latitude': {
            //     type: Number,
            //     default: function () {
            //         return 39.50
            //     }
            // },
            // 'longitude': {
            //     type: Number,
            //     default: function () {
            //         return -98.35
            //     }
            // },
            // 'zoom': {
            //     type: Number,
            //     default: function () {
            //         return 4
            //     }
            // }
        },
        methods: {
            showMap() {
                debugger;
                this.map = new google.maps.Map(document.getElementById(this.theMap), {
                    center: {lat: this.latLong.latitude, lng: this.latLong.longitude},

                    zoom: this.zoom
                });
            },
            geoDecoding() {
                let geocoder = new google.maps.Geocoder();
                let theLocation = this.location;
                let latLong = this.latLong;

                    return new Promise(function (resolve, reject) {
                        geocoder.geocode({'address': (theLocation ? theLocation : 'canada')}, function (results, status) {
                            console.log(results);
                            if (status === google.maps.GeocoderStatus.OK) {
                                console.log(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                                latLong.latitude = results[0].geometry.location.lat();
                                latLong.longitude = results[0].geometry.location.lng();
                            } else {
                                reject(status);
                            }
                        });
                    });
            }
        },
        mounted() {
            //this.geoDecoding();
            this.showMap();

        },
        created() {
            this.geoDecoding();
            Bus.$on('passLocation', (input) => {
                this.location = input;
                this.geoDecoding();
            });
        },


    }
</script>

<style scoped>
    .map-container {
        width: 80vw;
        margin: 5vh auto;
        height: 50vh;
        background: fuchsia;
    }
</style>

Answer 1

您需要在latLong上使用观察者：

  watch: {
    latLong: {
      handler: function(val, oldVal) {
        this.showMap();
      },
      deep: true
    }
  },

Answer 2

我认为执行此操作的方式是使用Google的API代码：

panTo(<your-lat-lng-coords>);

要将其合并到您的代码中，这将在异步调用期间设置。

我的承诺是methods:{geoDecoding(){}}如下：

geoDecoding() {
    let geocoder = new google.maps.Geocoder();
    let theLocation = this.location;
    let latLong = this.latLong;
    self = this;

    let service = new google.maps.places.PlacesService(this.map);
    var erez_markers = [];

    return new Promise(function (resolve, reject) {
        geocoder.geocode({'address': theLocation}, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                console.log(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                latLong.latitude = results[0].geometry.location.lat();
                latLong.longitude = results[0].geometry.location.lng();
                this.myLatlng = new google.maps.LatLng(latLong.latitude, latLong.longitude);
                self.map.panTo(this.myLatlng);//******* this would shift map on every instantiation with new lat/lng's
            } else {
                reject(status);
            }
        });
    });
}

我的状态数据是使用默认值设置的，因此map会在初始化时返回一些内容，如下所示：

latLong: {
    latitude: 43.6532,
    longitude: -79.3832
},
location: '',
zoom: '',

显示地图将全局设置，以便我们能够从任何位置调用/重新实例化它。我已在methods:{showmap(){}}

下进行了设置

this.map = new google.maps.Map(document.getElementById(this.theMap), {
                    center: {lat: this.latLong.latitude, lng: this.latLong.longitude},
                    zoom: this.zoom
});