3

我遇到了一个问题，让 Google 地图显示在我的 Onsen UI 和 Angular JS 应用程序中。这是我正在使用的代码 -

索引.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

谁能指出我正确的方向以及如何以正确的方式进行这项工作。

谢谢

4

1 回答 1

6

您需要等到 DOM 完全加载。我猜 AngularJS 控制器初始化是在 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);
});

我的应用

于 2014-06-05T10:52:33.027 回答