我正在尝试设置两个单独的 div,其中一个显示传统的谷歌地图,一个显示旁边该位置的街景。然后我试图通过单击一个按钮来更改这些位置,以便我可以添加几个位置来展示。然而有困难。我想我可以将纬度和经度放在一个单独的文档中,但是如何将它们加载到不同的按钮中?我似乎连一件作品都做不出来。感谢任何朝着正确方向的帮助或推动。谢谢!
<script>
function initialize() {
var coords = new google.maps.LatLng(59.92883,10.75943);
document.getElementById('changeValues').onclick = function(coords) {
coords = this.coords;
var mapOptions = {
center: coords,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {
position: coords,
pov: {
heading: 80,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 500px; height: 400px"></div>
<div id="pano" style="position:absolute; left:510px; top: 8px; width: 500px; height: 400px;"></div>
<div id="meny"><input type="button" value="changeValues" id="changeValues" /></div>
</body>
</html>