Question

我正在使用带有angularjs指令的谷歌地图创建一个旅行视图。所有工作正常，除了谷歌地图适合纬度经度集合。我一直尝试使用fitbounds方法，但失败了。

谢谢，

以下是我的代码工作。

指令：

 <div class="trip-google-map" trip-map="" mapid="2" latitude="22.998673" longitude="72.514346"></div>

指令代码：

app.directive('tripMap', function ($compile) {
    return {
        controller: function ($scope, $location, mapService) {
            this.registerMap = function (myMap) {
                mapService.setTripMap(myMap);

            };
        },
        link: function (scope, elem, attrs, ctrl) {


            var mapOptions,
                latitude,
                longitude,
                mapStyles,
                map;
            latitude = attrs.latitude;
            longitude = attrs.longitude;
            mapStyles =
                [
                    {
                        "featureType": "water",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#a2daf2"
                            }
                        ]
                    },
                    {
                        "featureType": "landscape.man_made",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#f7f1df"
                            }
                        ]
                    },
                    {
                        "featureType": "landscape.natural",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#d0e3b4"
                            }
                        ]
                    },
                    {
                        "featureType": "landscape.natural.terrain",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "poi.park",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#bde6ab"
                            }
                        ]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "labels",
                        "stylers": [
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "poi.medical",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#fbd3da"
                            }
                        ]
                    },
                    {
                        "featureType": "poi.business",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "road",
                        "elementType": "geometry.stroke",
                        "stylers": [
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "road",
                        "elementType": "labels",
                        "stylers": [
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "geometry.fill",
                        "stylers": [
                            {
                                "color": "#ffe15f"
                            }
                        ]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "geometry.stroke",
                        "stylers": [
                            {
                                "color": "#efd151"
                            }
                        ]
                    },
                    {
                        "featureType": "road.arterial",
                        "elementType": "geometry.fill",
                        "stylers": [
                            {
                                "color": "#ffffff"
                            }
                        ]
                    },
                    {
                        "featureType": "road.local",
                        "elementType": "geometry.fill",
                        "stylers": [
                            {
                                "color": "black"
                            }
                        ]
                    },
                    {
                        "featureType": "transit.station.airport",
                        "elementType": "geometry.fill",
                        "stylers": [
                            {
                                "color": "#cfb2db"
                            }
                        ]
                    }
                ];



            mapOptions = {
                zoom: 12,
                disableDefaultUI: true,

                center: new google.maps.LatLng(latitude, longitude),

                mapTypeId: google.maps.MapTypeId.ROADMAP,
                styles: mapStyles,
                mapTypeControl: true,

                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.BOTTOM_CENTER
                },
                panControl: true,
                panControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE,
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
                scaleControl: true,
                streetViewControl: true,
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
            };
            /*
                        var mapOptions = {
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            mapTypeControl: false
                        };
                        */
            //google.maps.visualRefresh = true;
            var map = new google.maps.Map(elem[0], mapOptions);
            ctrl.registerMap(map);
            scope.InitializeTripdetailController();

            scope.$apply(function () {
                window.setTimeout(function () {
                    google.maps.event.trigger(map, 'resize');
                }, 100);
            });
        }

    };
});

控制器代码：

app.controller('tripdetailController', ['$scope', '$rootScope', '$timeout', 'mapService', 'ngDialog', function ($scope, $rootScope, $timeout, mapService, ngDialog) {
        $scope.tripPathPolylines = [];
        var trips = [];
        var insertTripLatlng = function (trip) {
            var isExists = false;
            for (var v in trips) {
                if (trips[v].hash == trip.hash) {
                    isExists = true
                    break;
                }
            }
            if (isExists == false) {
                trips.push(trip);
            }
        }
        function settrip() {
            var marker;
            var tripmap = mapService.getTripMap();
            var bounds = new google.maps.LatLngBounds();
            for (var j = 0; j < trips.length; j++) {
                var ltlng = new google.maps.LatLng(trips[j].lat, trips[j].lng);
                bounds.extend(ltlng);

                marker = new google.maps.Marker({
                    position: ltlng,
                    map: tripmap
                });

            }
            tripmap.fitBounds(bounds);
        }
        $scope.InitializeTripdetailController = function () {
            var tripData = $scope.$parent.ngDialogData;
            for (var p = 0; p < tripData.messages.length; p++) {
                insertTripLatlng({ lat: tripData.messages[p].trackPoint.pos.lat, lng: tripData.messages[p].trackPoint.pos.lng, hash: tripData.messages[p].trackPoint.pos.lat + "-" + tripData.messages[p].trackPoint.pos.lng })
            }
            settrip();
        }
    }]);

FitBounds代码：

 var tripmap = mapService.getTripMap();
 var bounds = new google.maps.LatLngBounds();
 for (var j = 0; j < trips.length; j++) {
     var ltlng = new google.maps.LatLng(trips[j].lat, trips[j].lng);
     bounds.extend(ltlng);
     marker = new google.maps.Marker({position: ltlng,map: tripmap});
  }
  tripmap.fitBounds(bounds);

地图看起来像：

It looks as with current code

它应该在fitbounds之后：

enter image description here

更新：地图的CSS ：

更新：地图已在ngDialog弹出窗口中加载。

 .trip-google-map {
     width: 100%;
     height: 450px;
  }

Answer 1

这是由于地图由ngDialog弹出指令调整大小。

使用as

在map resize回调中通过调用fitbounds解决

           $scope.$apply(function () {
                window.setTimeout(function () {
                google.maps.event.trigger(tripmap, 'resize');
                    tripmap.fitBounds(bounds);
                }, 100);
            });

谢谢大家的帮助。

Google地图fitBounds不起作用

1 个答案: