Non sono sicuro di come disattivare PhotoSpheres, ma ho trovato una soluzione che potrebbe essere utile a voi. Ho notato allo https://developers.google.com/maps/documentation/javascript/reference#StreetViewSource che durante la ricerca di una posizione, se si imposta la sorgente su OUTDOOR, i PhotoSpheres non vengono restituiti.
Pertanto, se si aggiungono listener per le modifiche alla posizione e quindi si cerca la posizione senza PhotoSpheres, penso che si dovrebbe essere in grado di impedirne la visualizzazione.
Ecco un esempio google maps modificato per illustrare:
<!DOCTYPE html>
<html>
<head>
\t <title>Place Autocomplete without PhotoSpheres</title>
\t <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
\t <meta charset="utf-8">
\t <style>
\t \t html, body {
\t \t \t height: 100%;
\t \t \t margin: 0;
\t \t \t padding: 0;
\t \t }
\t \t #map, #pano {
\t \t \t height: 100%;
\t \t \t width: 50%;
\t \t \t float:left;
\t \t }
\t \t .controls {
\t \t \t margin-top: 10px;
\t \t \t border: 1px solid transparent;
\t \t \t border-radius: 2px 0 0 2px;
\t \t \t box-sizing: border-box;
\t \t \t -moz-box-sizing: border-box;
\t \t \t height: 32px;
\t \t \t outline: none;
\t \t \t box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
\t \t }
\t \t #pac-input {
\t \t \t background-color: #fff;
\t \t \t font-family: Roboto;
\t \t \t font-size: 15px;
\t \t \t font-weight: 300;
\t \t \t margin-left: 12px;
\t \t \t padding: 0 11px 0 13px;
\t \t \t text-overflow: ellipsis;
\t \t \t width: 300px;
\t \t }
\t \t #pac-input:focus {
\t \t \t border-color: #4d90fe;
\t \t }
\t \t .pac-container {
\t \t \t font-family: Roboto;
\t \t }
\t \t #type-selector {
\t \t \t color: #fff;
\t \t \t background-color: #4d90fe;
\t \t \t padding: 5px 11px 0px 11px;
\t \t }
\t \t #type-selector label {
\t \t \t font-family: Roboto;
\t \t \t font-size: 13px;
\t \t \t font-weight: 300;
\t \t }
\t </style>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="map"></div>
<div id="pano"></div>
<script>
\t var map;
\t var panorama;
\t var streetViewService;
\t var DEFAULT_PROXIMITY = 50;
\t var MAX_PROXIMITY = 10000;
\t function initMap() {
\t \t map = new google.maps.Map(document.getElementById('map'), {
\t \t \t center: {lat: -33.8688, lng: 151.2195},
\t \t \t zoom: 13
\t \t });
\t \t var input = /** @type {!HTMLInputElement} */(
\t \t \t document.getElementById('pac-input'));
\t \t map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
\t \t var autocomplete = new google.maps.places.Autocomplete(input);
\t \t //autocomplete.bindTo('bounds', map);
\t \t streetViewService = new google.maps.StreetViewService();
\t \t panorama = new google.maps.StreetViewPanorama(
\t \t \t document.getElementById('pano'), {
\t \t \t \t position: {lat: -33.8688, lng: 151.2195},
\t \t \t \t pov: {
\t \t \t \t \t heading: 34,
\t \t \t \t \t pitch: 10
\t \t \t \t }
\t \t \t });
\t \t map.setStreetView(panorama);
\t \t autocomplete.addListener('place_changed', function() {
\t \t \t var place = autocomplete.getPlace();
\t \t \t if (!place.geometry) {
\t \t \t \t window.alert("Autocomplete's returned place contains no geometry");
\t \t \t \t return;
\t \t \t }
\t \t \t // If the place has a geometry, then present it on a map.
\t \t \t if (place.geometry.location) {
\t \t \t \t findClosestStreetView(place.geometry.location, DEFAULT_PROXIMITY);
\t \t \t }
\t \t });
\t \t function findClosestStreetView(point, proximity) {
\t \t \t streetViewService.getPanorama({location: point, radius: proximity, source: google.maps.StreetViewSource.OUTDOOR}, function processSVData(data, status) {
\t \t \t \t if (status == google.maps.StreetViewStatus.OK) {
\t \t \t \t \t map.panTo(data.location.latLng);
\t \t \t \t \t panorama.setPano(data.location.pano);
\t \t \t \t } else {
\t \t \t \t \t if (proximity < MAX_PROXIMITY) {
\t \t \t \t \t \t findClosestStreetView(point, proximity + 50);
\t \t \t \t \t } else {
\t \t \t \t \t \t // NO PANARAMA FOUND - do something else here...
\t \t \t \t \t \t panorama.setVisible(false);
\t \t \t \t \t }
\t \t \t \t }
\t \t \t });
\t \t }
\t }
</script>
<script src="https://maps.googleapis.com/maps/api/js?&libraries=places&callback=initMap" async defer></script>
</body>
</html>
Il panorama non è nello stesso luogo come il centro della mappa. Dov'è la posizione del panorama? –
Vedo che il tuo sito è stato aggiornato. Funziona ora, giusto? Niente più problemi? –
Sfortunatamente non ho trovato una soluzione, solo una sorta di modifica che è accettabile per ora. L'utente Wen sceglie un indirizzo dal completamento automatico, non mostro streetview dal couse della città in molti casi questo attiva Photo Sphere, la posizione è la stessa +/- una piccola quantità e quindi nella maggior parte dei casi viene mostrato streetview e non Photo Sfera. Per me è ridicolo che Google dosent ha la possibilità di semplicemente spegnerlo ... – Dreadlord