Question

我正在使用带有谷歌地图的Vue 2组件进行我的一个项目。

该组件如下：https://www.npmjs.com/package/vue2-google-maps

该组件在Firefox和Chrome中运行良好，但在Safari中却没有显示。问题结果是我用来调整组件大小的相对高度：

<google-map
    :center="mapCenter"
    :zoom="mapZoomLevel"
    :options="mapOptions"
    style="width: 100%; height: 100%;"  <!-- this line ! -->
    @g-resize="resized" 
    >
</google-map>

如果我放一个固定的高度，地图就可以了。问题是，在我当前的布局中，我有一个简单的标题，屏幕的其余部分都填充了地图，所以现在我的布局如下：

<section style="flex: 1 0 auto; display: flex">
    <div style="display: flex; flex: 1 0 auto;">
        <div style="position: relative; flex: 1; width: auto !important; height: auto !important;">
            <google-map></google-map> <!-- with height and width set to 100% -->

你知道我该如何解决这个问题？

Answer 1

解决了这个问题：

style="width: 100%; height: 100%;"

到此：

style="position: absolute; top: 0; bottom: 0;"

在Google

1 个答案: