将坐标传递到HTML页面以在新窗口中打开谷歌街景

Passing coordinates to HTML page to open Google Street View in new window

本文关键字:在新窗口中打开 谷歌街 HTML 坐标      更新时间:2023-09-26

我有一个单独的映射应用程序,它读取映射的当前中心,获取lat和long,然后将这些变量传递到HTML页面。以下是HTML页面及其javascript的代码。这将打开一个新窗口,但不会显示街道视图,也不会出现错误。

  var lat = getParameterByName('lat');
  var lon = getParameterByName('lon');
  var panorama;
  function initialize() {
    panorama = new google.maps.StreetViewPanorama(
        document.getElementById('street-view'),
        {
          position: {lat: ""+lat+"", lng: ""+lon+""}, //bad code???
          pov: {heading: 165, pitch: 0},
          zoom: 1
        });
  }
</script>
<script async defer
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBaSDR10ovsZ0rxygIpheEgrR2YjpbJHbg&callback=initialize">
</script>

从google.maps.LatLngLiteral中删除",并可能谨慎地在这些字符串上使用parseFloat)。

代码片段:

var lat = 40.713613; // getParameterByName('lat');
var lon = -74.006757; // getParameterByName('lon');
var panorama;
function initialize() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById('street-view'), {
      position: {
        lat: parseFloat(lat),
        lng: parseFloat(lon)
      },
      pov: {
        heading: 165,
        pitch: 0
      },
      zoom: 1
    });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#street-view {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="street-view"></div>