Onsen UI - Google 地图仅在活动选项卡中可用

Question

我正在尝试使用 monaca ide 和 onsen-ui 制作一个应用程序。我的问题是 google 地图只有在活动页面上时才会加载，如果在不同页面上则无法正常工作。我尝试了多种方法，但没有任何效果。你能建议我做错了什么吗？
这是我的代码：
index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/app.js"></script>
  <script src="http://maps.google.se/maps/api/js?sensor=false"></script>
    <script src="js/maps.js"></script>
  <script>
    ons.bootstrap();

  </script>
</head>


<body>    

  <ons-navigator page="list.html" var="app.navi"></ons-navigator>

  <ons-template id="list.html">
    <ons-page id="list-page">
      <ons-toolbar>
        <div class="center">Master Details</div>
      </ons-toolbar>

      <ons-list>

        <ons-list-item modifier="chevron" class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum"></div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">Item Title</span>
                <span class="item-label">4h</span>
              </header>
              <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>

        <ons-list-item modifier="chevron" class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum"></div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">Another Item Title</span>
                <span class="item-label">6h</span>
              </header>
              <p class="item-desc">Ut enim ad minim veniam.</p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>

        <ons-list-item modifier="chevron" class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum"></div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">Yet Another Item Title</span>
                <span class="item-label">1day ago</span>
              </header>
              <p class="item-desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>
      </ons-list>
     
    </ons-page>
  </ons-template>

  <ons-template id="detail.html">
    <ons-page id="detail-page">

      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Details</div>
      </ons-toolbar>

      <ons-list modifier="inset" style="margin-top: 10px">
        <ons-list-item class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum"></div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">Title</span>
                <span class="item-label">Foobar</span>
              </header>
              <p class="item-desc">desc</p>
            </ons-col>
          </ons-row>
        </ons-list-item>

        <ons-list-item modifier="chevron" id="add-note-action" class="add-note-action-item">
          <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
          Add a note
        </ons-list-item>
      </ons-list>

      <ons-list style="margin-top: 10px">
        <ons-list-item class="item">
          <header>
            <span class="item-title">Lorem ipsum dolor sit amet</span>
          </header>
          <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </ons-list-item>
    </ons-list>
    
      <div id="map"></div>

    </ons-page>
  </ons-template>

</body>

</html>

app.js

(function(){
  'use strict';

  var currentItem = {};

  $(document).on('pageinit', '#detail-page', function() {
    $('.item-title', this).text(currentItem.title);
    $('.item-desc', this).text(currentItem.desc);
    $('.item-label', this).text(currentItem.label);
    $('.add-note-action-item', this).click(function () {
        alert('dummy message');
    });
  });

  $(document).on('pageinit', '#list-page', function() {
    $('.item', this).on('click', function() {
      currentItem = {
        title : $('.item-title', this).text(),
        desc : $('.item-desc', this).text(),
        label : $('.item-label', this).text()
      };

      app.navi.pushPage('detail.html');
    });
  });

})();

maps.js

ons.ready(function maps() {
        var directionsService = new google.maps.DirectionsService(),
         directionsDisplay = new google.maps.DirectionsRenderer(),
   createMap = function (start) {
    var travel = {
      origin : (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,
      destination : "Alexanderplatz, Berlin",
      travelMode : google.maps.DirectionsTravelMode.DRIVING
      // Exchanging DRIVING to WALKING above can prove quite amusing :-)
     },
     mapOptions = {
      zoom: 10,
      // Default view: downtown Stockholm
      center : new google.maps.LatLng(59.3325215, 18.0643818),
      mapTypeId: google.maps.MapTypeId.ROADMAP
     };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("map-directions"));
    directionsService.route(travel, function(result, status) {
     if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
     }
    });
   };

   // Check for geolocation support 
   if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
      // Success!
      createMap({
       coords : true,
       lat : position.coords.latitude,
       lng : position.coords.longitude
      });
     }, 
     function () {
      // Gelocation fallback: Defaults to Stockholm, Sweden
      createMap({
       coords : false,
       address : "Sveavägen, Stockholm"
      });
     }
    );
   }
   else {
    // No geolocation fallback: Defaults to Lisbon, Portugal
    createMap({
     coords : false,
     address : "Lisbon, Portugal"
    });
   }
 });

style.css

#map {
    height: 100%; 
    width: 100%;     
}
  
#map-directions {
 float: right;
 width: 38%;
 padding-left: 2%;
    display:none;
}

.item {
      padding: 10px;
      line-height: 1;
    }
    .item-thum {
      background-color: #ccc;
      width: 50px;
      height: 50px;
      border-radius: 4px;
    }
    .item-title {
      font-size: 15px;
      font-weight: 500;
    }
    .item-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.3;
      margin: 4px 0 0 0;
      padding: 0 30px 0 0;
    }
    .item-label {
      font-size: 12px;
      color: #999;
      float: right;
    }

Answer 1

您正在 ons.ready 上加载地图，但我认为您的 details.html 页面在那一刻甚至没有附加到 DOM。它只是一个等待被推送（并附加）到导航器的模板，因此 ons.ready 上的 document.getElementById("map") 不会像您预期的那样工作。

您可以尝试在 pageinit 上加载地图，或者在您知道页面已附加的任何其他时刻加载地图。

Onsen UI - Google 地图仅在活动选项卡中可用

Onsen UI - Google maps working only in active tab

javascript

google-maps

onsen-ui

monaca