Question

我想在我的HTML中显示Google地图。这是我的代码：

HTML：

    <div class="map-content">
      <div map-marker="" ng-model="searchLocation" class="mapmarker"></div>
    </div>

JS：

app.directive('mapMarker',function(){
    return {
        restrict: 'EA',
        require: '?ngModel',
        scope:{
            searchLocation: '=ngModel'
        },
        controller: function ($scope) {
            $scope.searchLocation = {
                latitude: 48.137273,
                longitude: 11.575251
            };
        },
        resolve: {
            load: function () {

            }
        },
        link: function(scope , element, attrs , ngModel){

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

            ngModel.$render = function(){

                searchLatLng = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.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.searchLocation.latitude = searchMarker.getPosition().lat();
                        scope.searchLocation.longitude = searchMarker.getPosition().lng();
                    });
                }.bind(this));

            };

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

另外，我包括

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

它知道脚本文件，但它不能在我的html上显示地图。有什么建议吗？

Answer 1

通过一些修改，您的示例可以正常运行：see my plunkr。

angular
  .module('app', [])
  .directive('mapMarker',function(){
    return {
        restrict: 'EA',
        scope:{
            searchLocation: '=mapMarker'
        },
        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;

            searchLatLng = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.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.searchLocation.latitude = searchMarker.getPosition().lat();
                    scope.searchLocation.longitude = searchMarker.getPosition().lng();
                });
            });

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

您不需要ngModel。特别是ngModel。$ render。输入需要它，而不是你的情况。
地图容器必须具有初始尺寸：宽度和高度。

无法通过AngularJs加载Google Map

1 个答案: