vuejs3 - Vue 3 中的高级MarkerView

Question

使用 Google map 时，AdvancedMarkerView 未显示在 map 上。仅当在组件中存储 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 对我来说很有效，这是我的代码:https://codesandbox.io/s/vue-3-google-map-base-circles-forked-1hbe2p?file=/src/components/GoogleMapLoader.vue

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

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