Vue 3 中的高级MarkerView

Question

使用 Google 地图时，AdvancedMarkerView地图上不显示。googleMap仅当存储在组件中时才会出现此问题。当存储googleMap在 const 或 window 对象中时，它工作正常。

我想将其存储在组件中，以便稍后添加或删除标记。我错过了什么还是因为它AdvancedMarkerView是测试版？

mounted() {
    const loader = new Loader({
        apiKey: 'key',
        version: 'beta',
        libraries: ['marker'],
    });

    loader.load().then((google) => {
        this.googleMap = new google.maps.Map(this.$refs.map, this.mapOptions);
        // const googleMap = new google.maps.Map(this.$refs.map, this.mapOptions);
        // window.googleMap = new google.maps.Map(this.$refs.map, this.mapOptions);

        // Marker works fine
        new google.maps.Marker({
            map: this.googleMap,
            position: this.home.position,
        })

        // Works only with window.googleMap or const googleMap
        new google.maps.marker.AdvancedMarkerView({
            map: this.googleMap,
            position: this.home.position,
            content: this.buildContent(this.home),
            title: this.home.title
        });
    });
},

Answer 1

具有高级标记的 Vue3 对我有用，这是我的 codesanbox：https://codesandbox.io/s/vue-3-google-map-base-circles-forked-1hbe2p ?file=/src/components/GoogleMapLoader.vue

需要注意的一点是，在Vue3中，使用似乎会data()干扰this.map，改为 后data()，setup()就可以正常工作了。

更改您的 API 密钥，您应该能够看到新的标记。