だから私はGoogleマップ+ストリートビューを使用しています、私のサイト上：私はオートコンプリートの標準検索ボックスを使用してい またhttps://developers.google.com/maps/documentation/javascript/examples/streetview-simpleGoogleマップ+ストリートビューの問題 - Photo Sphere写真を無効にする方法
私はいくつかを入力すると、問題があります場所、ストリートビューはありません。標準のストリートビューのように動き回るためのコントロールがないPhoto Sphere画像...
ストリートビューで自由に移動できるようにするためにPhoto Sphereは本当に欲しくないので、今では1つのPhoto Sphere画像に「トラップ」することがあります... Photo Sphereなしでストリートビューを強制する方法はありますか？
PhotoSpheresを無効にする方法がわかりませんが、あなたに役立つ回避策が見つかりました。 https://developers.google.com/maps/documentation/javascript/reference#StreetViewSourceで、場所を検索するときにソースをOUTDOORに設定すると、PhotoSpheresは返されません。
したがって、場所の変更のためのリスナーを追加し、PhotoSpheresを使わずに場所を検索すると、それらが表示されないようにする必要があります。ここ
は、変形Googleマップの例は、説明することである。
<!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>
パノラマは、地図の中心と同じ場所にありません。パノラマの場所はどこですか？ –
あなたのサイトは更新されています。それは今、正しく機能しますか？もう問題はない？ –
不幸にも私は解決策を見つけられませんでしたが、現在では受け入れ可能な修正があります。 Wenユーザーはオートコンプリートからアドレスを選択しますが、私はCity Couseからストリートビューを表示しません。これはPhoto Sphereを有効にする多くのケースで、位置は同じ+/-少量で、ほとんどの場合ストリートビューが表示され、写真ではありません球。私のために、そのredicolous Googleのdosentは、単にそれをオフに切り替えるオプションが... – Dreadlord