Question

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

该应用程序是使用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>

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

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

我已经尝试了所有可能的解决方案，并且没有得到加载地图的预期结果，而无需调整浏览器窗口的大小。你能解决这个问题吗？

Answer 1

您是否可以尝试在创建Google地图对象后以编程方式触发resize事件？

您应该在var map = ...：

之后执行以下操作

google.maps.event.trigger(map, "resize");

您可能还想查看一个vuejs插件，该插件可帮助您将Google地图与vuejs一起使用，如下所示：https://www.npmjs.com/package/vue2-google-maps

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

Answer 2

经过几个小时的搜索后，我发现了一个名为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'
                    });
                });
            },

感谢所有帮助过我的人。

如果调整浏览器大小，谷歌地图v3仅渲染地图

2 个答案: