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 密钥，您应该能够看到新的标记。

Answer 2

对我来说，关键是切换到使用

shallowRef()

而不是

ref()

作为 dom 元素引用。 一旦我进行了切换，一切就开始工作了。