Google Maps auf Onsen UI Seite dot Anzeigen

Ich habe eine Besorgnis über die Google Maps mit Onsen UI verwendet Plugin: Google Maps Plugin Google Maps auf Onsen UI Seite dot Anzeigen

Wenn mein Google Maps div (Leinwand) direkt in der index.html-Seite befindet, I kann die google map perfekt anzeigen.

Wenn ich auf einer anderen Seite durch die Onsen UI Seite Menü reisen, können Google-Karte nicht mehr angezeigt werden auf einer der Seiten gereist. Und wenn ich zurück in der index.html Seite reisen, es funktioniert nicht mehr (Karten in weiß erscheinen).

Wenn ich im Navigator Definition Attribut jede Startseite setzen, ist es nicht weder arbeiten (ons-Navigator id = "navi" page = "START_PAGE"/ons-Navigator) Deshalb habe ich nur lassen: ons -navigator id = "navi"/ons-navigator

Ich weiß, dass es ein ähnliches Thema zu diesem Problem gibt, aber es wurde geschlossen und das Problem wurde nicht behoben: github.com/mapsplugin/cordova-plugin-googlemaps/issues/ 324

ich eine pDF-Datei anhängen die Reihenfolge und das Problem zu beschreiben (Sie können es online ohne Download sehen):

PDF_problem_description

Vielen Dank für Ihre Hilfe ist

Hier mein 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>

Hier mein Dashboard.html ist:

<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>

Quelle

2017-05-09 Juan Colombia

gelang es mir, das zu lösen Problem.

Für diejenigen, die die gleichen Probleme mit dem Google Maps-Plugin mit Onsen UI bekommen, verwenden Sie Google Maps ohne das Plugin, und es wird perfekt funktionieren, egal auf welcher Seite Sie reisen, durch den Onsen-Navigator.

Jemand gepostet bereits eine Erklärung wie Google Maps, ohne das Plugin zu verwenden. Es funktioniert sehr gut:

Using google maps without plugin

Prost

Quelle

2017-05-10 20:42:36

Google Maps auf Onsen UI Seite dot Anzeigen

Antwort

Verwandte Themen