Question

Iam在使用angularjs 1.x进行google地图时，所有google地图的javascript库都已加载，并且没有在div标签上显示

Answer 1

您是否为应该包含地图的div添加了宽度和高度。请查找我编写的下面的map指令，根据需要重用和修改。

可以像，

一样使用

<map trip="latLongObj" on-create="controllerFunction()"></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来确保有数据。

谷歌地图没有在angularjs中加载，javascript中没有控制台错误

1 个答案: