javascript - $scope 值未显示在其他 Controller 中,如何设置标记

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

我有 2 个 Controller ,

在第一个 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();
    }
});

我的 View 页面已调用另一个 Controller

<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 ,我试图访问纬度、经度值,但它显示未定义

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

错误

Error - angular-google-maps: could not find a valid center property

问题

1- How can I get latitude, longitude values on another controller

2-how can I able to create maker with a different icon ?

-------------- 新更新了我通过以下答案完成的内容 -----------------

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

注入(inject)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 -

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

最佳答案

创建服务

.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 内

.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 应该是这样的

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

我不知道你的第二个问题

关于javascript - $scope 值未显示在其他 Controller 中,如何设置标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38092499/

相关文章:

javascript - 无法将多个 adsense 代码添加到一个页面

javascript - 创建一个原型(prototype)只是为了保存内部对象属性可以吗?

javascript - 认知 + API 网关。获取状态 4​​01

javascript - Angular中多层指令之间的通信

javascript - 如何在谷歌地图上找到经纬度的最小值和最大值

javascript - JS 是否在操作系统级别使用非阻塞 I/O 来支持 AJAX?

javascript - Angular : How to make my Controller variable available on all page context?

AngularJs Controller 命名约定大写字母

javascript - react-native-maps 无法在无状态组件中引用 MapView

Javascript 和谷歌地图 API