Google map没有在angularjs中加载,javascript中没有控制台错误

Google map没有在angularjs中加载,javascript中没有控制台错误,angularjs,jquery-plugins,maps,Angularjs,Jquery Plugins,Maps,我正在使用angularjs 1.x在google maps上工作,所有google maps javascript库都已加载,但它没有显示在div标记上。您是否为应该包含地图的div添加了宽度和高度。请查找我编写的以下map指令,并根据需要重新使用和修改 它可以像这样使用 定义是, function map($window) { return { restrict: 'E', scope: { onCreate: '&

我正在使用angularjs 1.x在google maps上工作,所有google maps javascript库都已加载,但它没有显示在div标记上。您是否为应该包含地图的
div
添加了宽度和高度。请查找我编写的以下map指令,并根据需要重新使用和修改

它可以像这样使用

定义是,

  function map($window) {
    return {
        restrict: 'E',
        scope: {
            onCreate: '&',
            trip: '=',
            location: '@'
        },
        link: function ($scope, $element) {

            var DirectionsDisplay;
            var DirectionsService = new google.maps.DirectionsService();

            function initialize(trip) {
                DirectionsDisplay = new google.maps.DirectionsRenderer();

                var origin = {}, destin = {};

                if (!$scope.location) {
                    origin.lat = trip.origin.latitude;
                    origin.long = trip.origin.longitude;

                    destin.lat = trip.destination.latitude;
                    destin.long = trip.destination.longitude;
                } else {
                    origin.lat = trip.location.latitude;
                    origin.long = trip.location.longitude;
                }

                var mapOptions = {
                    center: new google.maps.LatLng(origin.lat, origin.long),
                    zoom: 13,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: false,
                    streetViewControl: false
                };


                var map = new google.maps.Map($element[0], mapOptions);

                if (!$scope.location) {
                    DirectionsDisplay.setMap(map);
                    DirectionsService.route({
                        origin: new google.maps.LatLng(origin.lat, origin.long),
                        destination: new google.maps.LatLng(destin.lat, destin.long),
                        travelMode: google.maps.TravelMode.DRIVING
                    }, function (response, status) {
                        if (status === google.maps.DirectionsStatus.OK) {
                            DirectionsDisplay.setDirections(response);
                        } else {
                            $window.alert('Directions request failed due to ' + status);
                        }
                    });
                }

                $scope.onCreate({ map: map });
            }

            $scope.$watch('trip', function (trip) {
                if (trip) {
                    initialize(trip);
                }
            }, true)
        }
    }
}

您可以在不使用监视程序的情况下实现它,并在使用指令以确保有数据时使用ng if。

向我们显示您失败的代码'