无法通过 AngularJs 加载谷歌地图答案

【问题标题】：Cannot load Google Map through AngularJs无法通过 AngularJs 加载谷歌地图
【发布时间】：2016-06-19 12:29:43
【问题描述】：

我想在我的 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 上显示地图。有什么建议吗？

【问题讨论】：

控制台说什么？
你在哪里包含了 api 脚本？

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

【解决方案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。输入需要它，这不是您的情况。
地图容器必须具有初始大小：宽度和高度。

【讨论】：