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

Question

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

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

请注意,我有带有硬编码默认值的道具(已注释掉),只是为了检查showMap()这些值,它是有效的.

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

我showMap()想要刷新每个被触发的事件,它将从this.latLong.latitude/ 获得刷新的数据()this.latLong.longitude并根据这些新值重新实例化地图.在这个目前点位在这里将这些代码实例,我正在showMap()给instatiate地图又映射为空sibce它没有收到来自纬度/经度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

我发现执行此操作的合适方法是使用 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);
            }
        });
    });
}

我的状态数据设置为默认值，因此地图将在初始化时返回一些内容，如下所示：

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
});