Ich versuche einzubetten zwei Google Street View auf der gleichen Seite steuert, sollte es in etwa so aussehen:Mehrere Google Street Views auf der gleichen Seite
How the end result should look like
Ich möchte, dass meine Besucher, die Kontrollen verwenden auf beiden Elementen, um mit der Maus durch den Bereich zu navigieren. Ist dies auf der gleichen HTML-Seite möglich?
Beispiel für mehrfach (3) streetView panoramas
(aus verschiedenen examples in the documentation, Gebrauch gemacht (aber erfordert nicht wirklich) JQuery
Code-Schnipsel.
function initPano() {
var panoramas = [];
panoDivs = document.getElementsByClassName('pano');
$(".pano").each(function(idx, el) {
console.log("idx=" + idx + " lat:" + parseFloat($(this).data("lat")) + " lng:" + parseFloat($(this).data("lng")) + " heading:" + parseFloat($(this).data("heading")));
var panorama = new google.maps.StreetViewPanorama(
el, {
position: {
lat: parseFloat($(this).data("lat")),
lng: parseFloat($(this).data("lng"))
},
pov: {
heading: parseFloat($(this).data("heading")),
pitch: 0
},
visible: true
});
panoramas.push(panorama);
});
}
google.maps.event.addDomListener(window, "load", initPano);html,
body {
margin: 0;
padding: 0;
}
.pano {
height: 200px;
width: 200px;
margin: 2px;
padding: 2px;
}
.col {
height: 200px;
width: 620px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="col">
<div style="float:left" class="pano" data-lat="42.345573" data-lng="-71.098326" data-heading="34"></div>
<div style="float:right" class="pano" data-lat="40.729884" data-lng="-73.990988" data-heading="265"></div>
<div class="pano" data-lat="37.869260" data-lng="-122.254811" data-heading="165"></div>
</div>
Ja, es ist möglich auf der gleichen HT ML Seite. – geocodezip
Frage mich, warum jemand diese Frage abgelehnt hat. FWIW, obwohl es sehr einfach ist, ist es immer noch nicht eine Frage, die off-topic oder nicht konstruktiv ist, um es downvoted zu werden. – mccbala