Question

我目前正在努力弄清楚如何使谷歌地图反应，因为当安装组件时，尚未选择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

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

如何让谷歌地图反应？

1 个答案: