Question

我正在尝试显示和隐藏在Angular中渲染streetMap的div。

显示地图的button具有以下代码：

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

showStreetView函数：

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;足以正确删除全景图的位置。但是我遗憾地发现是（我相信）有一些处理程序保持活动状态，因此每当我显示，隐藏然后再次显示地图时，我的所有应用程序都会减速直到冻结并崩溃。

但这很好用。我可以显示和隐藏我的streetView，没关系。

另一个问题

此代码：

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）我已经了解到全景图应该被定位一次，并使用class方法执行一些操作，所以为什么在前面已经描述过的情况下出现黑屏？ 3）如果问题是语句panorama = new google.maps.StreetViewPanorama(streetview_div, panoramaOptions);创建的处理程序，那么当我想销毁它们时，有没有办法适当地删除所有活动的依赖项？

StreetViewPanorama处理删除的正确方法

0 个答案: