我在让 Google map 显示在我的 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 加载完成。我猜 AngularJS Controller 初始化是在 DOM 内容加载到您的应用程序之前开始的。
我修改了你的代码。它在我的环境中运行良好。
应用程序.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);
});
关于angularjs - 温泉 UI 和 Angular JS 谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23715679/