温泉UI和Angular JS Google Maps

罗里·斯坦德利

我遇到问题,无法在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内容加载到您的应用之前开始的。

我修改了您的代码。在我的环境中,它运行良好。

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);
});

我的应用程式

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Google Maps Angular Js

来自分类Dev

Angular Js和Google Maps API ngGeolocation

来自分类Dev

Kendo UI和Google Maps

来自分类Dev

简单的Backbone.js和Google Maps Rendering

来自分类Dev

Google Maps JS API-获取西北和东南界

来自分类Dev

带有JS和JSTL的Google Maps Multiple Marker

来自分类Dev

Blazor:Google Maps JS API

来自分类Dev

DocumentFragment和Google Maps

来自分类Dev

angular-google-maps与angular-ui / ui-map

来自分类Dev

Google Maps-GeoJSON.js-替换光标

来自分类Dev

Google Maps JS示例未显示

来自分类Dev

外部js文件中的Google Maps?

来自分类Dev

Ember.js中的Google Maps

来自分类Dev

如何从Google Maps JS API获取MapPanes

来自分类Dev

Google Maps JS示例未显示

来自分类Dev

自动完成的Google Maps JS错误

来自分类Dev

Google MAPS JS API 未加载

来自分类Dev

Google Maps Markers和AngularJS

来自分类Dev

Google Maps和SqlLite的性能

来自分类Dev

angular-google-maps,访问常规的Google Maps API

来自分类Dev

Google Maps JS Api并未涵盖Kendo UI Mobile应用中的所有div

来自分类Dev

Google Maps JS v3和HTML5 JavaScript框架

来自分类Dev

Google Maps和Richfaces 3.3.3(prototype.js 1.6.0.3)可能不兼容

来自分类Dev

淘汰赛JS-使用ko.toJSON和Google Maps的无效状态错误

来自分类Dev

使用 Google Maps 和 React Js ES6 显示多个标记

来自分类Dev

Google Maps App:在 Google Drive 上托管 .js 文件

来自分类Dev

Angular Google Maps ui-gmap-markers标签

来自分类Dev

如何包括起点和终点的UI窗口-Google Maps应用

来自分类Dev

删除/移动Google Maps标记(jquery-ui-maps)