Onsen UI和Angular JS Google Maps
Ror*_*ley 3 angularjs onsen-ui
我遇到了一个问题,让谷歌地图显示在我的Onsen UI和Angular JS应用程序中.这是我正在使用的代码 -
的index.html
<body ng-controller="mainController">
<ons-screen>
<ons-navigator title="Page 1">
<div class="center">
<h1>Page 1</h1>
<ons-button ng-click="pushMe()">Push Page 2</ons-button>
</div>
</ons-navigator>
</ons-screen>
</body>
JS
(function(){
'use strict';
angular.module('myApp', ['onsen.directives']);
})();
function mainController($scope){
$scope.pushMe = function(){
$scope.ons.navigator.pushPage('page2.html');
}
}
function controller2($scope){
var mapOptions = {
center: new google.maps.LatLng(43.069452, -89.411373),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
Page2.html
<ons-page class="center" ng-controller="controller2">
<ons-navigator-toolbar
title="Page 2">
</ons-navigator-toolbar>
<h2>Page 2</h2>
<div id="map"></div>
单击按钮转到第2页时,会显示以下错误消息
Error a is null
我假设在运行controller2时,标记尚未进入DOM以供查找 #map
任何人都可以指出我正确的方向,如何以正确的方式使这项工作.
谢谢
您需要等到DOM完全加载.我想在你的应用程序中加载DOM内容之前,AngularJS控制器初始化已经开始了.
我修改了你的代码.它在我的环境中运行良好.
app.js
var yourApp = angular.module('myApp', ['onsen.directives']);
yourApp.controller("mainController", function($scope) {
$scope.pushMe = function(){
$scope.ons.navigator.pushPage('page2.html');
}
});
yourApp.controller("controller2", function($scope, $timeout) {
$timeout(function(){
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
},200);
});
| 归档时间： |
|
| 查看次数： |
2781 次 |
| 最近记录： |