如何使谷歌地图反应？

Question

我目前正在努力弄清楚如何使 Google Map 具有响应性，因为在安装组件时，还没有选择 lat 和 lng。看看我的代码：

<template>
    <div>
        <div class="google-map" id="sidebar-map"></div>
    </div>
</template>

<script>
    export default {
        props: ["coordinates", "zoom"],

        data() {
            return {
                latLng: {
                    lat: 0,
                    lng: 0
                }
            }
        },

        mounted() {
            this.latLng = this.coordinates;

            let map = new google.maps.Map(document.getElementById('sidebar-map'), {
                zoom: this.zoom,
                center: this.latLng
            });
            let marker = new google.maps.Marker({
                position: this.latLng,
                map: map
            });
        }
    }
</script>

有什么办法可以new google.maps.Map和new google.maps.Marker当数据发生变化时是这个组件吗？

任何想法或方向/提示将不胜感激。

Answer 1

您可以观察coordinates 或zoom 道具的变化。

https://vuejs.org/v2/guide/computed.html#Watchers

我不熟悉 google maps API，但如果它在不断反弹到同一个元素时代价高昂（或中断），您可以考虑将实例存储在组件的字段中并使用任何可用的 API 方法以编程方式更改缩放和坐标。