Question

所以在我的网站上我使用谷歌地图+街景： https://developers.google.com/maps/documentation/javascript/examples/streetview-simple

此外我正在使用带有自动完成功能的标准搜索框，问题是当我进入某些位置时，没有街景，只有Photo Sphere图像没有任何控件可以在标准街景中移动...

我真的不想要Photo Sphere，因为我希望我的用户能够自由地在街景中移动，现在他们有时会被“困在”一张Photo Sphere图像中...有没有办法我可以强制街景Photo Sphere？

Answer 1

我不确定如何关闭PhotoSpheres，但我找到了一个可能对您有用的解决方法。我在https://developers.google.com/maps/documentation/javascript/reference#StreetViewSource注意到，在搜索位置时，如果将源设置为OUTDOOR，则不会返回PhotoSpheres。

因此，如果您为位置更改添加侦听器，然后搜索没有PhotoSpheres的位置，我认为您应该能够阻止它们出现。

这是一个经过修改的谷歌地图示例来说明：

<!DOCTYPE html>
<html>
<head>
	<title>Place Autocomplete without PhotoSpheres</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#map, #pano {
			height: 100%;
			width: 50%;
			float:left;
		}
		.controls {
			margin-top: 10px;
			border: 1px solid transparent;
			border-radius: 2px 0 0 2px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			height: 32px;
			outline: none;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
		}

		#pac-input {
			background-color: #fff;
			font-family: Roboto;
			font-size: 15px;
			font-weight: 300;
			margin-left: 12px;
			padding: 0 11px 0 13px;
			text-overflow: ellipsis;
			width: 300px;
		}

		#pac-input:focus {
			border-color: #4d90fe;
		}

		.pac-container {
			font-family: Roboto;
		}

		#type-selector {
			color: #fff;
			background-color: #4d90fe;
			padding: 5px 11px 0px 11px;
		}

		#type-selector label {
			font-family: Roboto;
			font-size: 13px;
			font-weight: 300;
		}

	</style>
</head>
<body>
<input id="pac-input" class="controls" type="text"
       placeholder="Enter a location">
<div id="map"></div>
<div id="pano"></div>
<script>

	var map;
	var panorama;
	var streetViewService;
	var DEFAULT_PROXIMITY = 50;
	var MAX_PROXIMITY = 10000;

	function initMap() {
		map = new google.maps.Map(document.getElementById('map'), {
			center: {lat: -33.8688, lng: 151.2195},
			zoom: 13
		});
		var input = /** @type {!HTMLInputElement} */(
			document.getElementById('pac-input'));

		map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

		var autocomplete = new google.maps.places.Autocomplete(input);
		//autocomplete.bindTo('bounds', map);

		streetViewService = new google.maps.StreetViewService();
		panorama = new google.maps.StreetViewPanorama(
			document.getElementById('pano'), {
				position:  {lat: -33.8688, lng: 151.2195},
				pov: {
					heading: 34,
					pitch: 10
				}
			});
		map.setStreetView(panorama);

		autocomplete.addListener('place_changed', function() {
			var place = autocomplete.getPlace();
			if (!place.geometry) {
				window.alert("Autocomplete's returned place contains no geometry");
				return;
			}
			// If the place has a geometry, then present it on a map.
			if (place.geometry.location) {
				findClosestStreetView(place.geometry.location, DEFAULT_PROXIMITY);
			}
		});

		function findClosestStreetView(point, proximity) {
			streetViewService.getPanorama({location: point, radius: proximity, source: google.maps.StreetViewSource.OUTDOOR}, function processSVData(data, status) {
				if (status == google.maps.StreetViewStatus.OK) {
					map.panTo(data.location.latLng);
					panorama.setPano(data.location.pano);
				} else {
					if (proximity < MAX_PROXIMITY) {
						findClosestStreetView(point, proximity + 50);
					} else {
						// NO PANARAMA FOUND - do something else here...
						panorama.setVisible(false);
					}
				}
			});
		}

	}

</script>
<script src="https://maps.googleapis.com/maps/api/js?&libraries=places&callback=initMap" async defer></script>
</body>
</html>

Google Maps + Streetview问题 - 如何禁用Photo Sphere

1 个答案: