使用多个组件一次加载 Google 地图

Question

我正在使用 Google API 在我的应用程序上显示地图，并且我正在使用多个动态组件，每个组件都加载一个地图。是否可以在父组件中只加载一次地图并在每个子组件中显示？

这是我的组件结构（我已经删除了对我的问题很重要的所有内容）：

家长

<template>
    <div>
        <div v-for="tab in getTabs" :key="tab.index">
            <keep-alive>
                <component v-if="selectedTab === tab.index" v-bind:is="selected"/>
            </keep-alive>
        </div>
    </div>
</template>

<script>
    import Tab from './Tab';

    export default {
        name: 'Dispatcher',
        components: {
            Tab
        },
        data() {
            return {
                selected: '',
                selectedTab: '',
                tabIds: []
            }
        }
    }
</script>

孩子

<template>
    <div class="row">
        <div class="col-md-12" style="height:80vh">
            <div class="gmap"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Tab'
    }
</script>

index.blade.php

<script src="map.js" type="text/javascript"></script>
<div id="dispatcher-body">
    {{ csrf_field() }}
    <dispatcher></dispatcher>
</div>

我的刀片中的脚本 ma​​p.js 正在尽一切努力将 Google 地图加载到具有 gmap 类的 div 上，例如在我的子组件中。地图加载良好，但它为每个子组件创建了一个新地图。

我尝试使用 v-slot 但它不适用于我的 ma​​p.js 并且我的脚本说它找不到任何 gmap 类（因为我刷新页面时没有子组件）。

提前致谢，

Answer 1

也许你应该试试vue-google-maps 我强烈建议不要将 vanilla 库与 vue、react 或 Angular 等框架一起使用，因为它们有自己的工作流程，并且会在它们之间产生冲突