Как перезагрузить существующий объект карты в моем приложении Angular?

Question

Как перезагрузить существующий объект карты в моем приложении Angular?

0

У меня есть приложение Angular/Ionic javascript, в котором у меня есть карты google, загруженные в представление. Когда я запускаю сборку приложения на своем iPhone, я замечаю, что всякий раз, когда загружается Google Maps, он потребляет довольно много памяти. В 1 сеансе я нахожу, что пользователь видит карту 30-40 раз. Каждый раз, когда пользователь возвращается к просмотру карты из другого представления, я считаю, что создается новый объект карты и потребляется больше памяти. В результате я обнаружил, что мои приложения вылетают после более длительных сеансов.

Мой вопрос: вместо того, чтобы каждый раз создавать новый объект карты, как перезагрузить ту же карту снова, когда пользователь переходит к этому конкретному виду? Вот соответствующая часть кода:

контроллер:

    .controller('GuessCtrl', function($scope, $state, $stateParams, $ionicPopup, $ionicLoading, $ionicHistory) {

            $scope.initialise = function() {
              var myLatlng = new google.maps.LatLng(37.758446, -122.411789);
              var markersArray = [];

              //Initial settings for the map
              var mapOptions = {
                      center: myLatlng,
                      zoom: 2,
                      mapTypeId: google.maps.MapTypeId.ROADMAP,
                      styles: [{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}]

                  };

              //Load the initial map
              console.log(map); //null
              var map = new google.maps.Map(document.getElementById("map"), mapOptions);
              console.log(map); //map object details


              $scope.map=map;

            };

            google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());

    })

Посмотреть:

<ion-view view-title="Guess" cache-view="false"  can-swipe-back="false">
  <ion-content scroll="false">

  <!-- START OF IMAGE -->
  <div id = "map" data-tap-disabled="true" style = "height:{{heightWidth}}px;"></div>
  <!-- END OF IMAGE -->


  </ion-content>
</ion-view>

sharataka 25 сен. 2015, в 05:03

Источник

0

Вы можете сделать карту дочерней по отношению к телу и переместить ее за экран, когда она не используется ... затем расположить ее внутри области просмотра, когда будет введен соответствующий маршрут. Таким образом, он будет создан только один раз
charlietfl 25 сен. 2015, в 02:40
0

Вы действительно не должны работать с частями, относящимися к DOM карты, в контроллере, выложите мою директиву Google Maps, когда я смогу выкопать ее здесь
shaunhusain 25 сен. 2015, в 02:54

Теги:

javascript

ionic-framework

angularjs

google-maps

1 ответ

Ещё вопросы

Вы можете сделать карту дочерней по отношению к телу и переместить ее за экран, когда она не используется ... затем расположить ее внутри области просмотра, когда будет введен соответствующий маршрут. Таким образом, он будет создан только один раз
Вы действительно не должны работать с частями, относящимися к DOM карты, в контроллере, выложите мою директиву Google Maps, когда я смогу выкопать ее здесь

shaunhusain · Accepted Answer · 2015-09-25T02-00-00.000Z

Кажется, что проблема с ключом API в примере ниже, но вы можете получить суть. Можно создать элемент, который вы просто добавляете к элементу директив при навигации между представлениями, здесь предостережение, хотя это означает, что только один из этих элементов может отображаться сразу.

Некоторые вещи здесь, чтобы иметь дело с тем, когда массив маркеров изменяет и компилирует содержимое infowindow, так что кнопки с ng-click и whatnot будут работать там. Связанные с ограничениями вещи - это просто изменить уровень масштабирования, чтобы содержать некоторый набор маркеров, добавленных в карту, можно удалить, если вам это не нужно, но это должно дать вам хорошую базу.

/**
* itSimpleGoogleMap Module
*
* Just a google maps api wrapper
*/

(function(){
  'use strict';
  angular.module('itSimpleGoogleMap', [])

  .directive('itSimpleGoogleMap', function($compile, $timeout){
    // Runs during compile
    var _currentMarkers = [];

    var newdiv = document.createElement('div');
    newdiv.style.width = "100%";
    newdiv.style.height = "100%";
    var map = new google.maps.Map(newdiv, {
      center:  {lat: 41.90, lng: -87.65},
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    return {
      scope: {
        markers:'=',
        overlays:'=',
        triggerResize:'='
      }, // {} = isolate, true = child, false/undefined = no change
      
      link: function(scope, iElm) {
        console.log(newdiv);
        iElm[0].appendChild(newdiv);

        _.each(_currentMarkers, function(marker){
          marker.setMap(null);
        })
        google.maps.event.trigger(map, 'resize');


        scope.$watch('triggerResize', function(){
          google.maps.event.trigger(map, 'resize');
        });


        $timeout(function(){

          var mapOptions = {
            center:  {lat: 41.90, lng: -87.65},
            zoom: 10
          };


          scope.$watchCollection('markers', function(){
            if(!scope.markers || !scope.markers[0] || !scope.markers[0].coords.latitude)
            {
              return;
            }

            _.forEach(_currentMarkers, function(curMarker){
              curMarker.setMap(null);
              google.maps.event.clearInstanceListeners(curMarker);
            });

            _currentMarkers = [];

            var bounds = new google.maps.LatLngBounds();

            var infowindow = new google.maps.InfoWindow();

            if(scope.markers.length==0){
              map.setCenter({lat: 41.90, lng: -87.65});
              return;
            }

            _.forEach(scope.markers, function(markerData){
              var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(markerData.coords.latitude,markerData.coords.longitude),
                  map: map,
                  icon:markerData.icon
                  // title:markerData.data['Growing Site Name'].answer
              });

              bounds.extend(marker.position);

              var infoWindowElement;

              $compile(markerData.infoWindow)(scope, function(cloneElm){
                infoWindowElement = cloneElm[0];
              });

              google.maps.event.addListener(marker, 'click', function() {
                infowindow.close();
                infowindow.setContent(infoWindowElement);
                infowindow.open(map,marker);
              });
              _currentMarkers.push(marker);
            });
            map.fitBounds(bounds);
          });

        },500)
      }
    };
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>


<div ng-app='itSimpleGoogleMap' style="width:500px; height:500px;">
  
<it-simple-google-map 
  markers="model.mapOpts.markers"
  trigger-resize="resizeMap">
</it-simple-google-map>
                            
</div>