【问题标题】:the scope doesn't send data to html范围不向 html 发送数据
【发布时间】:2018-05-01 21:55:33
【问题描述】:

我给我的地图提供了纬度和经度,但在地图中它没有。 谁能帮忙?

图片 1:

图像2:

这是控制器:

        angular.module('todoController', ['ngMap' , 'firebase'])

            // inject the Todo service factory into our controller
            .controller('mainController', ['$scope' , '$firebaseArray' , function($scope , $firebaseArray ,NgMap , $timeout ) {
         // check the ng-map docs for api url and api key       
        $scope.mapsApiUrl = 'AIzaSyA3ZMA6KlxboXRuA7ItNNSlJp3xcgjaB0M'; 
            $scope.$onInit = onInit;

初始化地图的onInit函数

        function onInit() {
            NgMap.getMap().then(function (mapInstance) {
            var center = mapInstance.getCenter();

            google.maps.event.trigger(mapInstance, 'resize');
            mapInstance.setCenter(center);

            $timeout(function () {
                $scope.map = mapInstance;
            });
            }) ; }

火力基地参考

               // CREATE A FIREBASE REFERENCE
                var config = {
                    apiKey: "AIzaSyAKoDxaWtWmvnDAvMBwddPeGt16gRPzALg",
                    authDomain: "trackeur-backend.firebaseapp.com",
                    databaseURL: "https://trackeur-backend.firebaseio.com",
                    projectId: "trackeur-backend",
                    storageBucket: "trackeur-backend.appspot.com",
                    messagingSenderId: "981610558503"
                };
                firebase.initializeApp(config);

这是运行应用程序的函数

         $scope.addTodo = function () {
                var lat = firebase.database().ref().child('coordinates').child('lat');
                var lon = firebase.database().ref().child('coordinates').child('lon');
                setInterval(() => {
                            lat.on("value", function(snapshot) {
                                    // This isn't going to show up in the DOM immediately, because
                                    // Angular does not know we have changed this in memory.
                                    // $scope.data = snapshot.val();
                                    // To fix this, we can use $scope.$apply() to notify Angular that a change occurred.
                                    $scope.$apply(function() {
                                    $scope.data = snapshot.val();
                                    });
                                });

                            lon.on("value", function(snapshot) {
                                    // This isn't going to show up in the DOM immediately, because
                                    // Angular does not know we have changed this in memory.
                                    // $scope.data = snapshot.val();
                                    // To fix this, we can use $scope.$apply() to notify Angular that a change occurred.
                                    $scope.$apply(function() {
                                    $scope.data1 = snapshot.val();
                                    });
                            });

                            // here I provide the latitude and longitude to my map 

                                console.log($scope.data  +' ,  '+ $scope.data1 ) ; 
                                $scope.coord ={
                                    lat: $scope.data , 
                                    lon: $scope.data1
                                } ; 


                            }, 1000);


                };

我的问题是我从 firebase 获取纬度和经度,但是当我将它们发送到我的 HTML 时,它没有标记我得到的坐标,实际上它根本没有移动,这是标记:

<marker position="[{{$coord.lat}} , {{$coord.lon}}] " icon="car2.png"></marker>

【问题讨论】:

  • 您对问题的描述很难理解。我不知道是什么“我给我的地图提供了纬度和经度,但在地图中它没有使用它。”方法。附带说明一下,在 SO 上发布 api 密钥并不是一个好主意。你应该把值改成假的
  • Inline Array Annotation 缺少与 mainController 构造函数的依赖关系。
  • 屏幕截图还显示了两个未处理的拒绝。添加拒绝处理程序以显示错误。
  • 对不起,我会解释这个问题:我创建一个对 firebase 的引用,然后我给范围两个变量 $scope.data 将包含 latitude 和 $scope.data1 将包含 longitude 。标签标记的属性位置采用两个数组(纬度和经度),我使用范围通过纬度和经度提供属性位置..
  • lat.onlon.on 是非阻塞异步操作。它们下面的代码在datadata1 从服务器到达之前执行

标签: angularjs firebase angularfire ng-map


【解决方案1】:

属性内最好只使用一个双花括号{{ }},interpolation

<marker position="{{'['+data+','+data1+']'}}"  icon="car2.png">
</marker>

这减少了模板中的观察者数量。

还可以使用从异步块中应用的 $scope 变量。

【讨论】:

  • 谢谢您,我已采纳您的建议!我设法解决了
  • 最好只有一个事件处理程序触发coordinates 的更改,而不是两个事件处理程序,一个用于lat,另一个用于lon
猜你喜欢
  • 1970-01-01
  • 2017-02-04
  • 2019-09-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-06-10
  • 1970-01-01
相关资源
最近更新 更多