Question

我想询问是否有可能/现实的谷歌地图，然后用鼠标在一个单独的框中显示谷歌街景？

例如：我有一个使用标准语法创建的Long / Lat的谷歌地图：

        var mymap = new google.maps.Map(document.getElementById('divContainer'), {
            zoom: 17,
            center: new google.maps.LatLng(-37, 144),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            fullscreenControl: true,
            streetViewControl: false
        });

然后使用地图，一个用户可以在地图上运行鼠标，如果一个框/ div跟随鼠标左右坐到一边等，就会看到街景。

Answer 1

这是一个有趣的用例。我认为可以这样做。

您可以使用StreetViewPanorama class - 作为第一个参数传递一个HTML元素，该元素将成为街景视图的容器，第二个参数是选项（StreetViewPanoramaOptions object）

然后，当鼠标悬停在地图上时，我们需要捕获mousemove事件，获取光标的LatLngBounds并使用setPosition()方法更新StreetViewPanorama位置。如果您想在更新位置时以某种方式旋转观看点，可以使用setPov()方法（请参阅StreetViewPanorama类）。

您可以使用另一个代码来移动小街景窗口（ pano ），但我留给您：）

让我们看一下以下示例：

＆＃13;

function initialize() {
  var fenway = {
    lat: 42.345573,
    lng: -71.098326
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    center: fenway,
    zoom: 14
  });
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10
      }
    });
  map.setStreetView(panorama);

  google.maps.event.addListener(map, 'mousemove', function(e) {
    panorama.setPosition(e.latLng);
  });
}

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 100%;
  width: 45%;
}

.as-console-wrapper{
  display:none !important;
}

＆＃13;

<script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize">
</script>

<div id="map"></div>
<div id="pano"></div>

＆＃13;

如果这对您有用，请告诉我。这只是一个帮助您实现特定用例的想法，可能不是完全正确的解决方案，但我希望您现在有一个起点：）

带有街景鼠标的Google地图

1 个答案: