如何在特定的纬度加载街景容器，同时单击事件以获取街景

How to load a streetview container at specific latlong but also click event to get streetview?

本文关键字：单击 事件 获取街 纬度 加载街      更新时间：2023-09-26

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

无论如何可以让街景容器在开始时加载特定的纬度，并允许用户单击左侧地图以调出不同的街景？（下面有PANO的当前代码...

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);

将此添加到初始化函数中：

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

而这个到进程SVData函数：

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

工作小提琴

工作代码片段：

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>

相关文章：