Google Maps + Straßen Ausgabe - Wie Photo Sphere

Also auf meiner Seite bin ich mit Google Maps + Streetview deaktivieren: https://developers.google.com/maps/documentation/javascript/examples/streetview-simple Google Maps + Straßen Ausgabe - Wie Photo Sphere

auch ich mit der automatischen Vervollständigung Standard searchbox bin mit, das Problem ist, wenn ich einige eingeben Orte, es gibt keine Streetview, nur Photo Sphere Bild ohne Steuerung zum Bewegen wie in Standard Streetview ...

Ich möchte wirklich nicht Photo Sphere, weil ich möchte, dass meine Benutzer sich frei bewegen mit Blick auf die Straße, und jetzt werden sie manchmal in einem Photo Sphere-Bild "gefangen" ... Gibt es eine Möglichkeit, Street View ohne Photo Sphere zu erzwingen?

Quelle

2015-11-06 Dreadlord

Das Panorama ist nicht an der gleichen Stelle wie das Zentrum der Karte. Wo ist der Ort des Panoramas? –

Ich sehe, Ihre Website ist aktualisiert. Es funktioniert jetzt, oder? Keine Probleme mehr? –

Leider habe ich keine Lösung gefunden, nur eine Modifikation, die für den Moment akzeptabel ist. Wen Benutzer wählt eine Adresse von Autocomplete, ich zeige nicht streetview von der Stadt cose in vielen Fällen aktiviert dies Photo Sphere, der Standort ist der gleiche +/- einige kleine Menge und dann in den meisten Fällen streetview wird angezeigt und nicht Foto Kugel. Für mich ist das Redicol, dass Google dosent die Option hat, es einfach auszuschalten ... – Dreadlord

Ich weiß nicht, wie ich PhotoSpheres abschalten kann, aber ich habe einen Workaround gefunden, der für Sie nützlich sein könnte. Ich bemerkte bei https://developers.google.com/maps/documentation/javascript/reference#StreetViewSource, dass bei der Suche nach einem Speicherort, wenn Sie die Quelle auf OUTDOOR festlegen, PhotoSpheres nicht zurückgegeben werden.

Daher, wenn Sie Listener für Standortänderungen hinzufügen, und suchen Sie nach dem Speicherort ohne PhotoSpheres, ich denke, Sie sollten verhindern können, dass sie angezeigt werden.

Hier ist eine modifizierte Google Maps Beispiel zu illustrieren:

<!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>

Quelle

2015-12-06 17:58:33 brenzy

Google Maps + Straßen Ausgabe - Wie Photo Sphere

Antwort

Verwandte Themen