Fatal编程技术网
  • google-maps/
  • Google maps 谷歌地图在Onsen用户界面上的点显示

Google maps 谷歌地图在Onsen用户界面上的点显示

google-maps

Google maps 谷歌地图在Onsen用户界面上的点显示,google-maps,onsen-ui,Google Maps,Onsen Ui,我担心与Onsen UI一起使用的google地图插件： 当我的谷歌地图div（canvas）直接位于index.html页面时，我可以完美地显示谷歌地图 当我通过Onsen UI侧菜单浏览到任何其他页面时，google地图将无法再显示在浏览到的任何页面上。当我返回index.html页面时，它不再工作（地图显示为白色） 如果我在导航器定义中加入了任何起始页属性，它也不起作用（ons navigator id=“navi”page=“start\u page”/ons navigator），这

我担心与Onsen UI一起使用的google地图插件：

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

当我通过Onsen UI侧菜单浏览到任何其他页面时，google地图将无法再显示在浏览到的任何页面上。当我返回index.html页面时，它不再工作（地图显示为白色）

如果我在导航器定义中加入了任何起始页属性，它也不起作用（ons navigator id=“navi”page=“start\u page”/ons navigator），这就是为什么我只允许：ons navigator id=“navi”/ons navigator

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

我附上一个pdf文件来描述序列和问题（您可以在线查看，无需下载）：

非常感谢你的帮助

这是我的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>


指数
仪表板
Index.html
地图1
显示地图1
ons.platform.select（'android'）
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
函数onDeviceReady（）{window.powermanagement.acquire（）}
角度模块（'app'，['onsen']））
.controller（'AppCtrl'，函数（$scope）{
$scope.show_map_1=函数（）{
$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=函数（）{
$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=函数（）{
$scope.map\u 1.setDiv（document.getElementById（'map\u canvas\u 1'））
$scope.map_1.refreshLayout（）；
$scope.map_1.setBackgroundColor（'绿色'）
}
$scope.onMapReady_2=函数（）{
$scope.map\u 2.setDiv（document.getElementById（'map\u canvas\u 2'））
$scope.map_2.refreshLayout（）；
$scope.map_2.setBackgroundColor（'绿色'）
}
$scope.fn={}；
$scope.fn.load=函数（第页）{
var menu=document.getElementById（'menu'）；
var navi=document.getElementById（'navi'）；
menu.close（）；
重新设置页面（第页，{动画：'幻灯片'，动画选项：{持续时间：0.4，延迟：0，计时：'轻松'}）；
};
})
这是我的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>  


Dashboard.html
地图2
显示地图2
我设法解决了这个问题

对于那些在使用带有Onsen UI的google maps插件时遇到同样问题的用户，可以在不使用该插件的情况下使用google maps，无论您访问哪个页面，它都可以通过Onsen navigator完美工作

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

干杯我设法解决了这个问题

对于那些在使用带有Onsen UI的google maps插件时遇到同样问题的用户，可以在不使用该插件的情况下使用google maps，无论您访问哪个页面，它都可以通过Onsen navigator完美工作

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

Cheers

OnsenUI为页面动态添加一个背景div，检查您的map容器元素并检查，因为所有父级都必须使用此css样式透明
背景颜色：rgba（0,0,0,0）

对我来说，有一个div用类“page--background”隐藏了地图，该类不是由插件动态设置为透明的（因为它是一个无父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>



此处（页面底部）对此进行了解释：
OnsenUI为页面动态添加一个背景div，检查映射容器元素并检查，因为所有父级都必须使用此css样式透明
背景颜色：rgba（0,0,0,0）

对我来说，有一个div用类“page--background”隐藏了地图，该类不是由插件动态设置为透明的（因为它是一个无父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>



这里（页面底部）对此进行了解释：
正如您在anwser中所说，您可以始终使用Javascript Web API，下面是Web API和本机API之间的比较表。正如您在anwser中所说，您可以始终使用Javascript Web API，下面是Web API和本机API之间的比较表。