javascript - 如何在特定经纬度加载街景容器，同时点击事件获取街景？

Question

我有两个并排设置的容器，左侧是混合谷歌地图，右侧是街景容器。现在你可以点击左边的 map ，在右边显示该位置的街景。在初始加载时，街景容器是空白的。

有没有办法让街景容器在启动时加载特定的 latlong 并且还允许用户单击左侧 map 以显示不同的街景？ (下面全景的当前代码......)

panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));


  google.maps.event.addListener(map, 'click', function(event) {
      sv.getPanoramaByLocation(event.latLng, 50, processSVData);
  });
}

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var Clickmarker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

    panorama.setPano(data.location.pano);
    panorama.setPov({
      heading: 180,
      pitch: 5
    });
    panorama.setVisible(true);

    google.maps.event.addListener(clickmarker, 'click', function() {

      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID
      panorama.setPano(ClickmarkerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });
  } else {
    alert('Street View data not found for this location.');
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

将此添加到您的初始化函数中:

var latLng = new google.maps.LatLng(45,-85); // coordinates of desired location.
sv.getPanoramaByLocation(latLng, 50, processSVData);

这是 processSVData 函数:

// Set the Pano to use the passed panoID
panorama.setPano(data.location.pano);
panorama.setPov({
    heading: 270,
    pitch: 0
});
panorama.setVisible(true);

working fiddle

工作代码片段:

var map;
var berkeley = new google.maps.LatLng(37.869085, -122.254775);
var sv = new google.maps.StreetViewService();

var panorama;

function initialize() {

  panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));

  // Set up the map
  var mapOptions = {
    center: berkeley,
    zoom: 16,
    streetViewControl: false
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  google.maps.event.addListener(map, 'click', function(event) {
    sv.getPanoramaByLocation(event.latLng, 50, processSVData);
  });

  // coordinates of desired location.
  sv.getPanoramaByLocation(berkeley, 50, processSVData);
}

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

    google.maps.event.addListener(marker, 'click', function() {

      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });

    // Set the Pano to use the passed panoID
    panorama.setPano(data.location.pano);
    panorama.setPov({
      heading: 270,
      pitch: 0
    });
    panorama.setVisible(true);
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="width:400px; height:400px; border: 2px solid #3872ac;"></div>
<div id="pano" style="width:400px; height:400px; border: 2px solid #3872ac;"></div>