StreetViewPanorama правильный способ обработки удаления - PullRequest
Новая
       22

StreetViewPanorama правильный способ обработки удаления

0 голосов
/ 26 октября 2018

Я пытаюсь показать и скрыть div, который отображает уличную карту в Angular.

button, отображающий карту, имеет следующий код: 

this.map.showStreetView(document.getElementById('streetview'),lat,lon);

the showStreetView function: 

showStreetView = function(streetview_div, lat,lon, heading, pitch) {
    if ( google && google.maps ){
        var glatlng = new google.maps.LatLng(lat, lon);

        if(!heading)
            heading = 0;
        if(!pitch)
            pitch = 0;

      var panoramaOptions = {
        position: glatlng,
        pov: {
          heading: heading,
          pitch: pitch
        }
      };

      this.peggyMarker = new amm.Marker(latlng);
      // just a custom marker

      if(!!panorama){

      }else{
          panorama = new google.maps.StreetViewPanorama(streetview_div, panoramaOptions);
      }

        this.peggyMarker.dragged.addHandler(function(sEvtName, oEvtSource, oEvtArgs){
            // This update the panorama when I drag the marker
            var latlng_loc = new google.maps.LatLng(oEvtArgs.lat, oEvtArgs.lng);
            panorama.setPosition(latlng_loc);
        });

        var loc_map = this;
        this.isPointValid = true;


    sv.getPanorama({location: glatlng}, function(result, status) {
        if(status === "OK"){
            panorama.setPosition(new google.maps.LatLng(lat, lon));
            var streetview_r = streetview.replace("[[rotate]]", "0");
            loc_map.peggyMarker.setIcon('data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(streetview_r));
            loc_map.peggyMarker.setIconSize([80, 80]);
            loc_map.peggyMarker.setIconAnchor([40, 40]);
            loc_map.peggyMarker.setDraggable(true);

            loc_map.addMarker(loc_map.peggyMarker);
            // ^^ this set the property of the marker and add it to the map
            loc_map.isPointValid = true;

        } else {
            loc_map.isPointValid = false;
            document.getElementById(streetview_div.id).innerHTML = "View street is not available in these coordinates.";
            loc_map.removeMarker(this.peggyMarker);
            loc_map.peggyMarker = null;
        }
    });

        /*if(this.api == 'googlev3')
            this.maps[this.api].setStreetView(panorama);
        */
    }
    else {
        console.log('library google.maps not available. For use Google Streetview is necessary include Google Map api library.');
    }
}

Кнопка, которая скрывает div: 

hideStreetView = function() {
    this.removeMarker(this.peggyMarker);
    this.peggyMarker = null;
    panorama = null; // this's is the 'error'
}

Проблема

Я думал, что назначить panorama = null;Достаточно было правильно удалить изображение панорамы.Но, к сожалению, я обнаружил, что (я полагаю) есть некоторые обработчики, которые остаются активными, поэтому всякий раз, когда я показываю, скрываю и затем снова показываю карту, все мое приложение замедляется, пока оно не замерзает и не падает.

Но это работает отлично.Я могу показать и скрыть свой просмотр улиц, и это нормально.

Другая проблема

Этот код: 

if(!!panorama){

      }else{
          panorama = new google.maps.StreetViewPanorama(streetview_div, panoramaOptions);
      }

всегда создаст новый panorama из-за оператора panorama = null; в функции hideStreetView.Итак, после поиска я обнаружил, что существует метод обновления координат без «удаления» каждый раз панорамы.

Я изменил свой код, удалив panorama = null; и отредактировал это, если это так:

if(!!panorama){
    var latlng_loc = new google.maps.LatLng(lat,lon);
    panorama.setPosition(latlng_loc);
          }else{
              panorama = new google.maps.StreetViewPanorama(streetview_div, panoramaOptions);
          }

Проблема в том, что если я перетаскиваю маркер и запускается функция .dragged, она работает, но только если я не скрывал streetView один раз.Итак, если я сделаю: show > hide > show > update, он просто покажет черный div без ошибок в консоли, и координаты верны.

Мои вопросы: Я явно что-то делаю не так, поэтому:

1) Как лучше всего справиться со сценарием, подобным этому?2) Я прочитал, что панораму нужно один раз изменить и использовать метод класса для выполнения некоторых действий, так почему я получаю черный экран в случае, который я описал ранее?3) Если проблемы связаны с обработчиком, который создает оператор panorama = new google.maps.StreetViewPanorama(streetview_div, panoramaOptions);, существует ли способ правильно удалить все активные зависимости, когда я хочу их уничтожить?

...