I want to display tabbar that is not displayed in OnsenUI+GoogleMapsons-page

I want to display Google Maps on one page using tabbar, but I can't display it well.After trial and error, we found that it cannot be displayed in the "ons-page" tag.

I use the plug-in to use Google MapsApi.
https://github.com/mapsplugin/cordova-plugin-googlemaps

Please give me some advice.

[Map Code]

<!DOCTYPE html>
<html>
<head>
    <metacharset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="default-src*;script-src'self' 'unsafe-inline' 'unsafe-eval'*;style-src'self' 'unsafe-inline';"/gt;
    <script type="text/javascript" src="cordova.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js">/script>
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
    <script>
        var app=ons.bootstrap('app', ['onsen']);
        varmap;
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            vardiv = document.getElementById("map_canvas");
            map=plugin.google.maps.Map.getMap(div);
            map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
        }
        function onMapReady() {
            alert('onMapReady');
        }
    </script>
</head>
<body>
    <div style="width:100%;height:640px"id="map_canvas"></div>
</body>
</html>

[Map Not Displayed Code]

<!DOCTYPE html>
<html>
<head>
    <metacharset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="default-src*;script-src'self' 'unsafe-inline' 'unsafe-eval'*;style-src'self' 'unsafe-inline';"/gt;
    <script type="text/javascript" src="cordova.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js">/script>
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
    <script>
        var app=ons.bootstrap('app', ['onsen']);
        varmap;
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            vardiv = document.getElementById("map_canvas");
            map=plugin.google.maps.Map.getMap(div);
            map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
        }
        function onMapReady() {
            alert('onMapReady');
        }
    </script>
</head>
<body>
    <ons-page id="page-map">>!--- This is the only difference -->
    <div style="width:100%;height:640px"id="map_canvas"></div>
    </ons-page>
</body>
</html>

onsen-ui

2022-09-30 19:24

1 Answers

I solved myself.
The reason was that the background generated by onsenui hid the map.

■ Countermeasures
I will erase the background of interference with jQuery or zepto.
If you erase it with ons.ready, the screen will turn black until the map is loaded, so you can erase it with MAP_READY.

So it's the code that works.

ononsenui+googlemap operating code <

<!DOCTYPE html>
<html>
<head>
    <metacharset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="default-src*;script-src'self' 'unsafe-inline' 'unsafe-eval'*;style-src'self' 'unsafe-inline';"/gt;
    <script type="text/javascript" src="cordova.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js">/script>
    <script src="lib/zepto/zepto.min.js">/script>
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
    <script>
        var app=ons.bootstrap('app', ['onsen']);
        varmap;
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            vardiv = document.getElementById("map_canvas");
            map=plugin.google.maps.Map.getMap(div);
            map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
        }
        function onMapReady() {
            // ↓↓↓ This is it! ↓↓↓
            $('.page__background').css('background-color','rgba(0,0,0,0)');
        }
    </script>
</head>
<body>
    <ons-page id="page-map">
    <div style="width:100%;height:640px"id="map_canvas"></div>
    </ons-page>
</body>
</html>

There was one in Coco, too.
https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/199#issuecomment-56475636

2022-09-30 19:24

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656