如何在 vue3 中访问 openlayers 地图的方法答案

【问题标题】：How to access methods of openlayers map in vue3如何在 vue3 中访问 openlayers 地图的方法
【发布时间】：2021-08-28 10:47:37
【问题描述】：

我使用vue3-openlyers 创建如下地图：

<ol-map ref="map">
...
</ol-map>

在Vue的composition api中，我尝试访问map的getSize()方法：

import { ref, defineComponent, onMounted } from "vue";

export default defineComponent({
    setup() {
        //works with views
        const map = ref<any>(null);

        const getSize = () => {
            // does not work
            console.log(map.value.getSize());
            console.log(map.getSize());
        };

        onMounted(getSize());
    
        return { map, getSize }
});

我收到以下错误： TypeError: map.value is null

我怀疑地图变量没有更新。我该如何解决这个错误？

【问题讨论】：

也许我不懂语法，但如果你调用getSize()，如果只有控制台输出，你会发生什么？
getSize() 应该返回地图容器的大小。所以它应该只输出容器大小。
但在您的示例中，getSize 中采取的唯一操作是 console.log(map.value.getSize()) 和 console.log(map.getSize())?
我不认为我是否理解您的问题，但 getSize 的唯一目的是在控制台上输出地图的大小。它不应该返回任何东西，它只是用来确认 map.getSize() 有效。
好的。您是否尝试在控制台上输出map？ map.value 为空，根据报错。

标签： vue.js openlayers vuejs3 openlayers-3 vue3-openlayers

【解决方案1】：

您可以使用this.$refs.map.map.<method> 调用引用地图的方法。（this 无法在组合 api 中访问！！在例如mounted() 中使用它。

例如你可以得到地图的大小： this.$refs.map.map.getSize()

【讨论】：