0
Googleマップとマーカーを表示しようとしています。それはうまくいった。今度はマップの緯度と経度の中心を動的に設定するメソッドを呼び出そうとしましたが、関数の前にマップが描画されているため、その中心は定義されていません。定義されていないエラーを返します。マップが描画される前にcoords（）関数を完全に実行する方法。一方、 。私は、緯度をハードコーディングすることによって原因を調べ、地図がよく描かれます。私もコールバックを試みたが、望みの結果を達成できなかった。angularjsコントローラで実行シーケンスを定義する方法は？
は、私のコントローラコード（js）と表示（html）です。
var appa = angular.module('appa',['firebase','uiGmapgoogle-maps']);
appa.controller('mainCtrl', function($firebaseObject,$scope) {
$scope.coords = function(){
var ref = firebase.database().ref();
var latArray = [];
var lngArray = [];
var cenlat;
var cenlng;
var marker = [];
ref.once("value")
.then(function(snapshot)
{
snapshot.forEach(function(child)
{
latArray.push(child.child("Lat").val());
console.log(child.child("Lat").val());
lngArray.push(child.child("Long").val());
var mark = {
id: child.child("Id").val(),
coords: {
latitude: child.child("Lat").val(),
longitude: child.child("Long").val()
},
options: { title: child.child("Alt").val() }
};
marker.push(mark);
});
cenlat = (Math.max.apply(Math,latArray)+Math.min.apply(Math,latArray)/2);
cenlng = (Math.max.apply(Math,lngArray)+Math.min.apply(Math,lngArray)/2);
});
$scope.map.center.latitude = cenlat;
$scope.map.center.longitude = cenlng;
};
$scope.map = {
center:
{
latitude: 51,
longitude: 4
},
zoom: 2
};
$scope.coords();
});<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org/" >
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDF-sQ_g7FJ46HeYo8e4dpVukyDkdE5UXw"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/2.1.0/angularfire.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<script type='text/javascript' src='app.js'></script>
<style type="text/css">
html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0px;
}
#map_canvas {
position: relative;
}
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
</head>
<body ng-app="appa">
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom">
<ui-gmap-marker ng-repeat="m in marker" coords="m.coords" options="m.options" idkey="m.id">
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
<!--example-->
</body>
</html>
これは役に立ちましたか？ – tasseKATT