$ scope值未显示在其他控制器中,如何设置标记

时间:2016-06-29 07:00:56

标签: javascript angularjs google-maps google-maps-api-3

我有2个控制器,

在第一个控制器中,我指定了纬度,经度值

var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) 
{
    if (status == google.maps.GeocoderStatus.OK) 
    {
        $scope.PostJobData.latitude=results[0].geometry.location.lat();
        $scope.PostJobData.longitude=results[0].geometry.location.lng();
    }
});

我的视图页面我调用了另一个控制器

<div ng-controller="getmap">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events">
    <ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id"></ui-gmap-marker>
</ui-gmap-google-map>
</div>

第二个控制器我试图访问纬度,经度值,但显示未定义

.controller('getmap', function ($scope) {
    alert($scope.PostJobData.latitude);
    alert($scope.PostJobData.longitude);

   angular.extend($scope, {
        map: {
            center: {
                latitude: $scope.PostJobData.latitude,
                longitude: $scope.PostJobData.longitude
            },
            zoom: 11,
            markers: [],
            events: {
            click: function (map, eventName, originalEventArgs) {
                var e = originalEventArgs[0];
                var lat = e.latLng.lat(),lon = e.latLng.lng();
                var marker = {
                    id: Date.now(),
                    coords: {
                        latitude: lat,
                        longitude: lon
                    }
                };
                $scope.map.markers.push(marker);
                console.log($scope.map.markers);
                $scope.$apply();
            }
        }
        }
    });
})

错误

  

错误 - angular-google-maps:无法找到有效的中心属性

问题

  

1-如何在另一个控制器上获取纬度,经度值

     

2 - 如何使用不同的图标创建制作者?

---------------新的更新我在下面的回答中做了什么-----------------

.controller('PostJob',['$scope', '$rootScope','$http','$state','commonService','FileUploader', function($scope, $rootScope, $http,$state,commonService,FileUploader,createMap)

注入的createMap

var geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': address}, function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                $scope.PostJobData.latitude=results[0].geometry.location.lat();
                $scope.PostJobData.longitude=results[0].geometry.location.lng();

                createMap.setlatValue(results[0].geometry.location.lat());
                createMap.setlogValue(results[0].geometry.location.lng());
            }
        });

服务 -

app.service('createMap', function () {
     var latValue = [];
     var logValue= [];

    this.getlatValue = function () {
       return latValue; 
    }

    this.setlatValue = function (latitude) {
       console.log(latitude);
       latValue = latitude;
    }

    this.getlogValue = function () {
     return logValue;
    }

    this.setlogValue = function (longitude) {
     console.log(longitude);
      logValue = longitude;
    }
});

另一名控制员 -

.controller('getmap', function ($scope,createMap) {
    alert($scope.PostJobData.latitude);
    alert($scope.PostJobData.longitude);

   angular.extend($scope, {
        map: {
            center: {
                latitude: createMap.getlatValue(),
                longitude: createMap.getlogValue()
            },
            zoom: 11,
            markers: [],
            events: {
            click: function (map, eventName, originalEventArgs) {
                var e = originalEventArgs[0];
                var lat = e.latLng.lat(),lon = e.latLng.lng();
                var marker = {
                    id: Date.now(),
                    coords: {
                        latitude: lat,
                        longitude: lon
                    }
                };
                $scope.map.markers.push(marker);
                console.log($scope.map.markers);
                $scope.$apply();
            }
        }
        }
    });
})

1 个答案:

答案 0 :(得分:1)

创建服务

.service('mydata', function () {
     var latValue = [];
     var logValue= [];

    this.getlatValue = function () {
       return latValue; 
    }

    this.setlatValue = function (latitude) {
       console.log(latitude);
       latValue = latitude;
    }

    this.getlogValue = function () {
     return logValue;
    }

    this.setlogValue = function (longitude) {
     console.log(longitude);
      logValue = longitude;
    }
})

在你的拳头控制器里面

.controller('myCtrl', functio($scope,mydata){ //you can see i have injucted mydata service to the controller 

     var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) 
{
    if (status == google.maps.GeocoderStatus.OK) 
    {
        $scope.PostJobData.latitude=results[0].geometry.location.lat();
        $scope.PostJobData.longitude=results[0].geometry.location.lng();

        mydata.setlatValue(results[0].geometry.location.lat());
        mydata.setlogValue(results[0].geometry.location.lng());
    }
});

});

你的第二个控制器应该是这样的

.controller('getmap', function ($scope , mydata) { //you can see i have injucted mydata service to the controller
    alert($scope.PostJobData.latitude);
    alert($scope.PostJobData.longitude);

   angular.extend($scope, {
        map: {
            center: {
                latitude: mydata.getlatValue();
                longitude: mydata.getlogValue();
            },
            zoom: 11,
            markers: [],
            events: {
            click: function (map, eventName, originalEventArgs) {
                var e = originalEventArgs[0];
                var lat = e.latLng.lat(),lon = e.latLng.lng();
                var marker = {
                    id: Date.now(),
                    coords: {
                        latitude: lat,
                        longitude: lon
                    }
                };
                $scope.map.markers.push(marker);
                console.log($scope.map.markers);
                $scope.$apply();
            }
        }
        }
    });
})

我对你的第二个问题一无所知