AngularJs-TypeError：无法读取未定义的属性“纬度”

Question

我想在我的页面中显示带有可拖动标记的 Google 地图。这是我的代码：

header.php：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true"></script>

ma​​p.js：

    app.directive('mapDirective',function(){
    return {
        templateUrl: 'map.html',
        restrict: 'EA',
        require: '?ngModel',
        scope:{
            myModel: '=ngModel'
        },
        link: function(scope , element, attrs , ngModel){
            var mapOptions;
            var googleMap;
            var searchMarker;
            var searchLatLng;
            scope.searchLocation = {
                latitude: 48.137273,
                longitude: 11.575251
            };
            ngModel.$render = function(){
                console.log("hhh");
                searchLatLng = new google.maps.LatLng(scope.myModel.latitude, scope.myModel.longitude);

                mapOptions = {
                    center: searchLatLng,
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                googleMap = new google.maps.Map(element[0],mapOptions);

                searchMarker = new google.maps.Marker({
                    position: searchLatLng,
                    map: googleMap,
                    draggable: true
                });

                google.maps.event.addListener(searchMarker, 'dragend', function(){
                    scope.$apply(function(){
                        scope.myModel.latitude = searchMarker.getPosition().lat();
                        scope.myModel.longitude = searchMarker.getPosition().lng();
                    });
                }.bind(this));

            };

            scope.$watch('myModel', function(value){
                var myPosition = new google.maps.LatLng(scope.myModel.latitude, scope.myModel.longitude);
                searchMarker.setPosition(myPosition);
            }, true);
        }
    }
});

map.html：

<div>
    <div style="display: block; height: 200px; width: 100%; ">
    </div>
</div>

index.html:

<map-directive ng-model="testModel"></map-directive>

实际上，我得到了这个错误：

TypeError: Cannot read property 'latitude' of undefined

如何解决？

已编辑： 我更改了我的 ma​​ps.js：

    app.directive('mapDirective',function(){
    return {
        templateUrl: '/app/user/ngApp/templates/libsView/templates/directives/map.html',
        restrict: 'EA',
        require: '?ngModel',
        scope:{
            myModel: '=ngModel'
        },
        controller: function ($scope) {
            $scope.searchLocation = {
                latitude: 48.137273,
                longitude: 11.575251
            };
        },
        link: function(scope , element, attrs , ngModel){

            var mapOptions;
            var googleMap;
            var searchMarker;
            var searchLatLng;

            ngModel.$render = function(){
                console.log("hhh");
                searchLatLng = new google.maps.LatLng(scope.myModel.latitude, scope.myModel.longitude);

                mapOptions = {
                    center: searchLatLng,
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                googleMap = new google.maps.Map(element[0],mapOptions);

                searchMarker = new google.maps.Marker({
                    position: searchLatLng,
                    map: googleMap,
                    draggable: true
                });

                google.maps.event.addListener(searchMarker, 'dragend', function(){
                    scope.$apply(function(){
                        scope.myModel.latitude = searchMarker.getPosition().lat();
                        scope.myModel.longitude = searchMarker.getPosition().lng();
                    });
                }.bind(this));

            };

            scope.$watch('myModel', function(value){
                var myPosition = new google.maps.LatLng(scope.myModel.latitude, scope.myModel.longitude);
                searchMarker.setPosition(myPosition);
            }, true);
        }
    }
});

但它不会改变。

Answer 1

myModel 变量应包含纬度和经度值。应该从

设置

<map-directive ng-model="testModel"></map-directive>

你需要在你的控制器中创建一个如下的对象，并将这个对象分配给上面 html 的指令。

var testModel = {
    latitude:1.2323,
    longitude:2.3434
};