谷歌地图与街景鼠标悬而未决

Question

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

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

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

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

您可以使用街景全景类来做到这一点 - 作为第一个参数，您传递一个HTML元素，该元素将成为街景的容器，第二个是选项(街景全景选项对象(

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

你可以有另一个代码来移动小街景窗口(pano(，但我留给你:)

让我们看一下以下示例：

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

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

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

让我知道这是否适合您。这只是一个帮助您实现特定用例的想法，可能不是完全正确的解决方案，但我希望您现在有一个起点:)