Question

我对与Onsen UI一起使用的google maps插件感到担忧： Google Maps Plugin

当我的谷歌地图div（画布）直接位于index.html页面时，我可以完美地显示谷歌地图。

当我通过Onsen UI侧面菜单访问任何其他页面时，谷歌地图无法再显示在任何页面上。当我返回index.html页面时，它不再起作用（地图以白色显示）。

如果我在导航器定义中输入任何起始页面属性，它既不起作用（ons-navigator id =＆＃34; navi＆＃34; page =＆＃34; start_page＆＃34; / ons-navigator）这就是为什么我只让：ons-navigator id =＆＃34; navi＆＃34; / ONS-导航

我知道有一个关于这个问题的类似话题，但它已被关闭，问题没有解决：github.com/mapsplugin/cordova-plugin-googlemaps/issues/324

我附上一个pdf文件来描述序列和问题（你可以在网上看到它而不下载）：

PDF_problem_description

非常感谢您的帮助

这是我的Index.html：

<!DOCTYPE html>
<html lang='en' ng-app='app'>
<head>

    <!-- meta Charset-->

    <meta charset='utf-8'>
    <script src='js/angular.min.js'></script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <link rel='stylesheet' href='onsenui/css/onsenui.css'/>
    <link rel='stylesheet' href="css/onsen-css-components.css"/>
    <script src='onsenui/js/onsenui.js'></script>
    <script src='onsenui/js/angular-onsenui.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta name='viewport' content='user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width'>

</head>


<body ng-controller="AppCtrl">


    <ons-splitter>


        <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable >

                <ons-page>

                    <ons-list>
                        <ons-list-item>
                            <div class="text_menu_color" ng-click="fn.load('index.html')">Index</div>
                        </ons-list-item>
                        <ons-list-item>
                            <div class="text_menu_color" ng-click="fn.load('html/dashboard.html')">Dashboard</div>
                        </ons-list-item>
                    </ons-list>

                </ons-page>

        </ons-splitter-side>


        <ons-splitter-content>
        <ons-navigator id="navi"></ons-navigator>
        </ons-splitter-content>

    </ons-splitter>

    <h3>Index.html</h3>
    <div id="map_canvas_1" style="position:fixed;width:160px;height:320px;left:10px;bottom:150px;background: blue;border: 2px solid black"><h3>map 1</h3></div>
    <button ng-click="show_map_1()" style="position:fixed;width:160px;height:100px; left:10px;bottom:30px">Show map 1</button>

<script>

ons.platform.select('android')
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {window.powermanagement.acquire()}

angular.module('app', ['onsen'])

        .controller('AppCtrl', function($scope) {

            $scope.show_map_1 = function(){
              $scope.map_1=""
              $scope.map_1 = plugin.google.maps.Map.getMap(document.getElementById('map_canvas_1'));
              $scope.map_1.addEventListener(plugin.google.maps.event.MAP_READY, $scope.onMapReady_1)
            }

            $scope.show_map_2 = function(){
              $scope.map_2=""
              $scope.map_2 = plugin.google.maps.Map.getMap(document.getElementById('map_canvas_1'));
              $scope.map_2.addEventListener(plugin.google.maps.event.MAP_READY, $scope.onMapReady_2)
            }

            $scope.onMapReady_1 = function() {
                $scope.map_1.setDiv(document.getElementById('map_canvas_1'))
                $scope.map_1.refreshLayout();
                $scope.map_1.setBackgroundColor('green')
                }

            $scope.onMapReady_2 = function() {
                $scope.map_2.setDiv(document.getElementById('map_canvas_2'))
                $scope.map_2.refreshLayout();
                $scope.map_2.setBackgroundColor('green')
                }

            $scope.fn = {};

            $scope.fn.load = function(page) {
                var menu = document.getElementById('menu');
                var navi = document.getElementById('navi');
                menu.close();
                navi.resetToPage(page, {animation: 'slide',  animationOptions:{duration: 0.4, delay: 0, timing: 'ease-in'}});
                };
        })

</script>

</body>

</html>

这是我的Dashboard.html：

<ons-page>

    <h3>Dashboard.html</h3>
    <div id="map_canvas_2" style="position:fixed;width:160px;height:320px;right:10px;bottom:150px;background: blue;border: 2px solid black" ><h3>map 2</h3></div>
    <button ng-click="show_map_2()" style="position:fixed;width:160px;height:100px; right:10px;bottom:30px" >Show map 2</button>

</ons-page>

Answer 1

我设法解决了这个问题。

对于那些使用带有Onsen UI的谷歌地图插件同样麻烦的人，使用没有插件的谷歌地图，无论您前往的页面，它都能通过温泉导航器完美地工作。

有人已经发布了关于如何在没有插件的情况下使用谷歌地图的解释。它运作得很好：

Using google maps without plugin

干杯

Answer 2

OnsenUI动态添加页面的背景div，检查映射容器元素并检查所有父级必须是透明的，具有此css样式background-color: rgba(0,0,0,0);

对我来说，有一个div隐藏地图的类“页面 - 背景”，它不会被插件动态设置为透明（因为它是一个没有绝对位置的父div），示例：

<div class="page__background page--material__background" __plugindomid="pgm423934967639"></div>
<div class="page__content page--material__content _gmaps_cdv_" __plugindomid="pgm1136479823937">
    <div id="mymap-container" class="gmap-container _gmaps_cdv_" __pluginmapid="map_0_147744461355" style="background-color: rgba(200, 200, 200, 0.5); position: relative; overflow: hidden;" __plugindomid="pgm888819903812"><div __plugindomid="pgm1177970622685" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; overflow: visible; z-index: 0;"></div></div></div>

初始化地图后，我使用jQuery应用透明背景样式来显示它：

mapDiv = document.getElementById("mymap-container");
myMap = plugin.google.maps.Map.getMap(mapDiv);
myMap.one(plugin.google.maps.event.MAP_READY, myMapInit);

myMapInit = function () {
    console.log("Map init done!"); // DEBUG
    $(".page__background").css( "background-color", "rgba(0,0,0,0)" );
}

这在此处解释（页面底部）：https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

谷歌在温泉UI页面上映射点

2 个答案: