app.js

Question

我遇到了一个问题，让Google地图显示在我的Onsen用户界面中。 Angular JS app。这是我正在使用的代码 -

的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

任何人都可以指出我正确的方向，如何以正确的方式进行这项工作。

由于

Answer 1

您需要等到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);
});

My App

温泉UI＆amp; Angular JS谷歌地图

1 个答案:

app.js