我遇到问题,无法在Onsen UI和Angular JS应用程序中显示Google地图。这是我正在使用的代码-
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完全加载。我猜想AngularJS控制器初始化是在将DOM内容加载到您的应用之前开始的。
我修改了您的代码。在我的环境中,它运行良好。
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);
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句