温泉UI＆安培;角JS谷歌地图 [英] Onsen UI & Angular JS Google Maps
问题描述
我有一个问题，让谷歌地图，我的温泉UI和放大器内显示;角JS应用程序。这里是code我一起工作 -
I am having an issue, getting Google maps to show within my Onsen UI & Angular JS app. Here is the code I am working with -
的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页给出以下错误消息
The following error message is given when I click the button to go to Page 2
Error a is null
我假设运行控制器2时，标记还没有进入的DOM为它找到 #map
任何人都可以点我在如何使这项工作以正确的方式向正确的方向。
Can anyone point me in the right direction with how to make this work in the correct manner.
感谢
推荐答案
您需要等待，直到DOM完全加载。我猜的DOM内容在您的应用程序加载之前就开始AngularJS控制器的初始化。
You need to wait until DOM is loaded completely. I guess AngularJS controller initialization started before DOM content is loaded in your app.
我修改您的code。它在我的环境工作得很好。
I modified your code. And it worked fine in my environment.
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);
});
这篇关于温泉UI＆安培;角JS谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
