Javascript google maps v3仅在调整浏览器大小时渲染贴图

我有一个应用程序，在这个应用程序中我有一个地图，但是如果我加载应用程序，地图会这样加载：

该应用程序使用Vuejs和Laravel开发，地图通过其他组件内部的vue组件加载，代码如下：

    <template>
   <div class="google-map">
      <div :id="mapName" style="height: 100%"></div>
   </div>
</template>
<style scoped>
    .google-map {
        width: 100%;
        height: 500px;
        margin: 0;
        padding: 0;
        background: gray;
    }

    /*body, html #map-canvas {
       height: 100%;
       width: 100%;
    }*/
</style>

<script>
    export default {
        name: 'google-map',
        props: ['name'],
        data() {
            return {
                mapName: this.name + "-map",
            }
        },

        mounted() {
            this.initMap();
        },

        methods: {

            initMap() {
                const element = document.getElementById(this.mapName);
                const options = {
                    zoom: 14,
                    center: new google.maps.LatLng(51.501527,-0.1921837)
                };

                var map = new google.maps.Map(element, options);
            }
        }
    }
</script>

.谷歌地图{
宽度：100%；
高度：500px；
保证金：0；
填充：0；
背景：灰色；
}
/*主体，html#地图画布{
身高：100%；
宽度：100%；
}*/
导出默认值{
名称：'谷歌地图'，
道具：['name']，
数据（）{
返回{
mapName:this.name+“-map”，
}
},
安装的（）{
this.initMap（）；
},
方法：{
initMap（）{
常量元素=document.getElementById（this.mapName）；
常量选项={
缩放：14，
中心：新google.maps.LatLng（51.501527，-0.1921837）
};
var map=new google.maps.map（元素、选项）；
}
}
}

在加载它的组件中，我使用以下代码：

<google-map name="example"></google-map>

---

我已经尝试了所有可能的解决方案，但没有得到预期的结果，即在不调整浏览器窗口大小的情况下加载地图。您能解决这个问题吗？

您能在创建Google Maps对象之后，尝试以编程方式触发一个调整大小的事件吗

您应该在

var映射=…

之后执行以下操作：

google.maps.event.trigger（映射，“调整大小”）；

您可能还想看看一个vuejs插件，它可以帮助您将Google地图与vuejs一起使用，如下所示：

---

我从未亲自使用过它，但它可能会有所帮助。

经过几个小时的搜索，我找到了一个名为gmaps的JQuery插件，并对其进行了测试，最终找到了解决方案。由于地图的表单位于选项卡中，因此我找到的解决方案如下：

mounted() {
            this.initMap();
        },

initMap() {

                $('#imoveis-add-tab').on('click', function () {
                    var map = new GMaps({
                        el: '#map',
                        lat: 10,
                        lng: 10,
                        zoom: 8,
                        width: '100%',
                        height: '600px'
                    });
                });
            },

---

感谢所有帮助过我的人。

为什么没有正文和html？因为内容是为html上的vuejs注入的。奇怪的是，如果我用html实现google，并使用iframe，它可以工作，但我需要它在没有iframe的情况下工作。我已经尝试了好几次，甚至插件都不能解决我的问题。你能尝试调用

google.maps.event.trigger（map，“resize”）setTimeout

回调中的code>？有时，当调用触发器方法时，Google Maps对象没有“正确”创建时，这只是一个时间问题。问题应该是vue，因为我使用.vue文件，但我使用php文件测试了实现，它工作正常。