本文介绍了不工作的谷歌地图fitBounds的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我创建使用谷歌地图angularjs指令一趟视图。除了谷歌地图fitbound到经纬度集合一切工作正常。
我已经尝试了所有使用fitbounds方法的方式,但失败了。

谢谢,

下面是我的code的努力。

指令:

 < D​​IV CLASS =跳闸谷歌地图行程映射=的azazaz =2纬度=22.998673经度=72.514346>< / DIV>

指令code:

  app.directive('tripMap',函数($编译){
    返回{
        控制器:函数($范围,$位置,地图服务){
            this.registerMap =功能(MYMAP){
                mapService.setTripMap(MYMAP);            };
        },
        链接:功能(范围,ELEM,ATTRS,CTRL){
            VAR的MapOptions,
                纬度,
                经度,
                mapStyles,
                地图;
            纬度= attrs.latitude;
            经度= attrs.longitude;
            mapStyles =
                [
                    {
                        类型特征:水,
                        元素类型:几何,
                        造型器:[
                            {
                                色:#a2daf2
                            }
                        ]
                    },
                    {
                        类型特征:landscape.man_made,
                        元素类型:几何,
                        造型器:[
                            {
                                色:#f7f1df
                            }
                        ]
                    },
                    {
                        类型特征:landscape.natural,
                        元素类型:几何,
                        造型器:[
                            {
                                色:#d0e3b4
                            }
                        ]
                    },
                    {
                        类型特征:landscape.natural.terrain,
                        元素类型:几何,
                        造型器:[
                            {
                                可见性:上
                            }
                        ]
                    },
                    {
                        类型特征:poi.park,
                        元素类型:几何,
                        造型器:[
                            {
                                色:#bde6ab
                            }
                        ]
                    },
                    {
                        类型特征:POI,
                        元素类型:标签,
                        造型器:[
                            {
                                可见性:上
                            }
                        ]
                    },
                    {
                        类型特征:poi.medical,
                        元素类型:几何,
                        造型器:[
                            {
                                色:#fbd3da
                            }
                        ]
                    },
                    {
                        类型特征:poi.business,
                        元素类型:全部,
                        造型器:[
                            {
                                可见性:上
                            }
                        ]
                    },
                    {
                        类型特征:路,
                        的ElementType:geometry.stroke,
                        造型器:[
                            {
                                可见性:上
                            }
                        ]
                    },
                    {
                        类型特征:路,
                        元素类型:标签,
                        造型器:[
                            {
                                可见性:上
                            }
                        ]
                    },
                    {
                        类型特征:road.highway,
                        的ElementType:geometry.fill,
                        造型器:[
                            {
                                色:#ffe15f
                            }
                        ]
                    },
                    {
                        类型特征:road.highway,
                        的ElementType:geometry.stroke,
                        造型器:[
                            {
                                色:#efd151
                            }
                        ]
                    },
                    {
                        类型特征:road.arterial,
                        的ElementType:geometry.fill,
                        造型器:[
                            {
                                色:#FFFFFF
                            }
                        ]
                    },
                    {
                        类型特征:road.local,
                        的ElementType:geometry.fill,
                        造型器:[
                            {
                                色:黑
                            }
                        ]
                    },
                    {
                        类型特征:transit.station.airport,
                        的ElementType:geometry.fill,
                        造型器:[
                            {
                                色:#cfb2db
                            }
                        ]
                    }
                ];            的MapOptions = {
                变焦:12,
                disableDefaultUI:真实,                中心:新google.maps.LatLng(纬度,经度)                mapTypeId设为:google.maps.MapTypeId.ROADMAP,
                款式:mapStyles,
                MapTypeControl中:真实,                mapTypeControlOptions中:{
                    风格:google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    位置:google.maps.ControlPosition.BOTTOM_CENTER
                },
                panControl:真实,
                PanControlOptions,以{
                    位置:google.maps.ControlPosition.LEFT_CENTER
                },
                zoomControl,用于:真实,
                ZoomControlOptions来:{
                    风格:google.maps.ZoomControlStyle.LARGE,
                    位置:google.maps.ControlPosition.LEFT_CENTER
                },
                scaleControl:真实,
                将streetViewControl:真实,
                streetViewControlOptions:{
                    位置:google.maps.ControlPosition.LEFT_CENTER
                },
            };
            / *
                        VAR的MapOptions = {
                            mapTypeId设为:google.maps.MapTypeId.ROADMAP,
                            MapTypeControl中:假的
                        };
                        * /
            //google.maps.visualRefresh = TRUE;
            变种地图=新google.maps.Map(ELEM [0],的MapOptions);
            ctrl.registerMap(地图);
            scope.InitializeTripdetailController();            范围。$应用(函数(){
                window.setTimeout(函数(){
                    google.maps.event.trigger(地图,调整);
                },100);
            });
        }    };
});

控制器code:

  app.controller('tripdetailController',['$范围,$ rootScope','$超时,地图服务,ngDialog',函数($范围,$ rootScope,$超时,地图服务,ngDialog){
        $ scope.tripPathPolylines = [];
        VAR车次= [];
        VAR insertTripLatlng =功能(旅){
            VAR isExists = FALSE;
            对(车次中VAR V){
                如果(TRIPS [V] .hash == trip.hash){
                    isExists =真
                    打破;
                }
            }
            如果(isExists == FALSE){
                trips.push(旅);
            }
        }
        功能settrip(){
            VAR标记;
            变种tripmap = mapService.getTripMap();
            VAR边界=新的google.maps.LatLngBounds();
            对于(VAR J = 0; J< trips.length; J ++){
                VAR ltlng =新google.maps.LatLng(游[J] .lat,车次[J] .lng);
                bounds.extend(ltlng);                标记=新google.maps.Marker({
                    位置:ltlng,
                    图:tripmap
                });            }
            tripmap.fitBounds(边界);
        }
        $ scope.InitializeTripdetailController =功能(){
            VAR tripData = $ $范围parent.ngDialogData。
            为(变量p值= 0; P&下; tripData.messages.length,P ++){
                insertTripLatlng({纬度:tripData.messages [P] .trackPoint.pos.lat,LNG:tripData.messages [P] .trackPoint.pos.lng,哈希:tripData.messages [P] .trackPoint.pos.lat + - + tripData.messages [p] .trackPoint.pos.lng})
            }
            settrip();
        }
    }]);

FitBounds code:

  VAR tripmap = mapService.getTripMap();
 VAR边界=新的google.maps.LatLngBounds();
 对于(VAR J = 0; J< trips.length; J ++){
     VAR ltlng =新google.maps.LatLng(游[J] .lat,车次[J] .lng);
     bounds.extend(ltlng);
     标记=新google.maps.Marker({位置:ltlng,地图:tripmap});
  }
  tripmap.fitBounds(边界);

的地图看起来像

这应该是fitbounds为后:

更新:CSS在地图

更新:地图加载中ngDialog弹出

  .trip  - 谷歌地图{
     宽度:100%;
     高度:450像素;
  }


解决方案

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

按呼叫fitbounds在地图大小调整回调解决同为

  $范围。$应用(函数(){
                window.setTimeout(函数(){
                google.maps.event.trigger(tripmap,调整);
                    tripmap.fitBounds(边界);
                },100);
            });

谢谢大家的帮助。

I am creating a trip view using google map with angularjs directive. All works fine except the google map fitbound to a latitude longitude collection.I have tried all the way to use the fitbounds methods but failed.

Thanks,

Below is my code efforts.

Directive:

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

Directive Code:

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);
            });
        }

    };
});

Controller Code:

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 Code:

 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);

The map looks like:

It should be after fitbounds as:

Update: css for map:

Update: The map is loaded in ngDialog popup.

 .trip-google-map {
     width: 100%;
     height: 450px;
  }
解决方案

It was due to map is resized by ngDialog popup directive.

Solved by call fitbounds in map resize callback with as

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

Thanks all for help.

这篇关于不工作的谷歌地图fitBounds的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-17 09:03