javascript - Vue组件中需要动态刷新 map

Question

我有一个工作组件执行以下操作:

• 通过 created() 中的全局总线方法从同级输入组件接收字符串=> 有效
• 通过 geoDecoding() 将字符串转换为纬度/经度坐标=> 有效
• 解决 promise 结果坐标，设置数据，也通过geoDecoding() => 有效
• 刷新showMap()事件触发后数据发生变化=> 不起作用 :(

Please note that I have props (commented out) with hardcoded defaults, just to check showMap() with those values, and it works.

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

我想要 showMap()刷新每个触发的事件，它会从 this.latLong.latitude 获取刷新的数据()/this.latLong.longitude并根据这些新值重新实例化 map 。在当前这一点并在此处粘贴此代码实例后，我得到了 showMap()实例化 map 但 map 是空的，因为它没有从 geoDecoding() 接收经纬度信息.

代码:

<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
    }
  },