我正在尝试使用 monaca ide 和 onsen-ui 制作应用程序。我的问题是谷歌地图只有在活动页面上才能加载，如果在不同的页面上不起作用。我尝试了多种方法，但没有任何效果。你能建议我做错了什么吗？
这是我的代码：
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>应用程序.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');
});
});
})();地图.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"
});
}
});样式.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;
}