Question

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

无论如何都要让streetview容器在开始时加载特定的latlong并允许用户点击左侧地图以显示不同的街景？（以下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);

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

工作代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何在特定纬度加载街景视图容器，还单击事件以获取街景视图？

1 个答案: