0

我在页面上有一个谷歌地图和一个街景全景查看器。在我的谷歌地图上绘制的标记很少，带有一些全景信息，例如 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>

全景.setPano(this.panoid); 只为标记触发一次

4

1 回答 1

0

不知道为什么全景图第二次不起作用。对我有用的解决方法是每次在单击事件侦听器中创建全景图：

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>

于 2017-07-05T14:08:05.827 回答