【问题标题】：framework7 cordova-plugin-googlemaps v2 z-index issueframework7 cordova-plugin-googlemaps v2 z-index 问题
【发布时间】：2018-02-15 16:15:34
【问题描述】：

我正在尝试在 framework7 项目中使用 https://github.com/mapsplugin/cordova-plugin-googlemaps

但我遇到了问题

当我导航到地图页面时，图像已加载但未显示

我认为问题在于 z-index

我试过那个解决方案

https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2028

但不起作用

这是地图页面之前的页面

红色的 div 是图片应该显示的地方

函数运行后，我看到的是地图而不是地图

我使用此代码导航到地图页面

 success: function (response) {
                        var responseObj = JSON.parse(response)
                        console.log(responseObj);
                        this.$root.navigate("/theMapPage/")

                    }

【问题讨论】：

.map { 宽度：90%;高度：400px；边框：1px 纯红色；保证金：5%；位置：相对； } 那是地图红色 div 样式，在页面加载时我将其背景转换为红色
我发现该插件使div背景透明并在div后面显示地图；我如何设置地图的 z-index ??

标签： google-maps cordova html-framework-7

【解决方案1】：

我找到了解决办法

正如我在评论中发布的那样，插件在应用程序后面制作地图

所以我隐藏所有页面并仅显示当前页面

 map.one(plugin.google.maps.event.MAP_READY, function () {
                        $$('.page').hide()
                        $$('.page.page-current').show()
                        map.clear();
                        map.getMyLocation(onSuccess, onError);
                    });

最后再次显示所有页面

        pageAfterOut: function () {
            // page has left the view
            $$('.page').show()
        }

【讨论】：