使用google标记的单击事件初始化用于setPano()的google.maps.StreetViewPanorama。只工作第一次

Question

我有一个谷歌地图和街景全景查看器在一页。有几个标记画在我的谷歌地图上，携带一些全景的信息，如panoId，Panoname等。在街景全景图上，我正在展示的第一个全景图的所有标记都在地图上。现在，我希望在标记上创建一个单击事件来初始化/加载街景全景查看器上的新全景图像。我创建的单击事件仅在下次单击时才能工作，它将返回控制台上的错误(Uncaught TypeError: a.ha is not a function)，如下图所示：

​

​

这是我的代码：

<div class="col-md-12" style="padding-bottom:20px;">
    <div id="tourmap"></div>
    <div id="panomap"></div>
</div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('tourmap'), {
  zoom: 22,
  center: {lat: latitude, lng: longitude}
});
setMarkers(map);
}

var beaches = [
['pano1.jpg',30.878170532669305, 75.8590769883433,'CAoSLEFGMVFpcFBta1ZwakNRc2V2NkhrWjdGTmIxeXRJeWRYd2E3TF9paVRKN1FP',31],
['pano2.jpg',30.87816823063522, 75.85907497668654,'CAoSLEFGMVFpcE5Ca2Zld3pVVEkyS0pjWGxjNHZOZ0c1bTE4MzhfdkdIN3VSNkRw',32],
['pano3.jpg',30.87816823063522, 75.85907967055232,'CAoSLEFGMVFpcE10UlhvcHU5QWxOckRxX0ZaZm5aYVJKSmFKWlExcEpNMWJ4aE55',33],
['pano4.jpg',30.87816650410961, 75.8590769883433,'CAoSLEFGMVFpcFB5V045allBU1Qzal9hSFVIVXlHa05TaXl0MkRyNUpOZjFxUjVF',34],

];


function setMarkers(map) {

              var image = {
                url: 'http://sonedomain.com/img/reddot_location.gif',
                size: new google.maps.Size(20, 32),
                origin: new google.maps.Point(0, 0),
                (0, 32).
                anchor: new google.maps.Point(0, 32)
              };

              var panorama = new google.maps.StreetViewPanorama(
                            document.getElementById('panomap'), {
                              pov: {heading: 165, pitch: 0},
                              motionTracking: false,
                              motionTrackingControl: false
                            });

              var shape = {
                coords: [1, 1, 1, 20, 18, 20, 18, 1],
                type: 'poly'
              };
              for (var i = 0; i < beaches.length; i++) {
                var beach = beaches[i];
                var marker = new google.maps.Marker({
                  position: {lat: beach[1], lng: beach[2]},
                  map: map,
                  icon: image,
                  draggable:true,
                  shape: shape,
                  title: beach[3],
                  panoid: beach[3],
                  localid: beach[4] 
                });


                marker.addListener('click', function(){

                    panorama.setPano(this.panoid);
                });


              } // for ends


            } // setMarkers ends
</script>

panorama.setPano(this.panoid)；只为标记触发一次

Answer 1

不知道为什么全景图第二次不能工作。一个适合我的解决方法是，每次在单击事件侦听器中创建全景图：

marker.addListener('click', function() {
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('panomap'), {
      pov: {
        heading: 165,
        pitch: 0
      },
      motionTracking: false,
      motionTrackingControl: false
    });
  panorama.setPano(this.panoid);
});

概念小提琴的证明

代码片段：

​

function initMap() {
  var map = new google.maps.Map(document.getElementById('tourmap'), {
    zoom: 22,
    center: {
      lat: 30.878170532669305,
      lng: 75.8590769883433
    }
  });
  setMarkers(map);
}

var beaches = [
  ['pano1.jpg', 30.878170532669305, 75.8590769883433, 'CAoSLEFGMVFpcFBta1ZwakNRc2V2NkhrWjdGTmIxeXRJeWRYd2E3TF9paVRKN1FP', 31],
  ['pano2.jpg', 30.87816823063522, 75.85907497668654, 'CAoSLEFGMVFpcE5Ca2Zld3pVVEkyS0pjWGxjNHZOZ0c1bTE4MzhfdkdIN3VSNkRw', 32],
  ['pano3.jpg', 30.87816823063522, 75.85907967055232, 'CAoSLEFGMVFpcE10UlhvcHU5QWxOckRxX0ZaZm5aYVJKSmFKWlExcEpNMWJ4aE55', 33],
  ['pano4.jpg', 30.87816650410961, 75.8590769883433, 'CAoSLEFGMVFpcFB5V045allBU1Qzal9hSFVIVXlHa05TaXl0MkRyNUpOZjFxUjVF', 34],

];

function setMarkers(map) {
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {
        lat: beach[1],
        lng: beach[2]
      },
      map: map,
      draggable: true,
      title: beach[3],
      panoid: beach[3],
      localid: beach[4]
    });
    marker.addListener('click', function() {
      var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('panomap'), {
          pov: {
            heading: 165,
            pitch: 0
          },
          motionTracking: false,
          motionTrackingControl: false
        });
      panorama.setPano(this.panoid);
    });
  } // for ends
} // setMarkers ends
google.maps.event.addDomListener(window, "load", initMap);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

.col-md-12 {
  width: 100%;
  height: 100%;
}

#tourmap {
  width: 50%;
  height: 100%;
  float: left;
}

#panomap {
  width: 50%;
  height: 100%;
  float: right;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="col-md-12" style="padding-bottom:20px;">
  <div id="tourmap"></div>
  <div id="panomap"></div>
</div>

​