Googleマップでストリートビューマウスを使用

Question

Googleマップを作成してマウスを使用して別のボックスにGoogleストリートビューを表示することは可能か/現実的かどうか尋ねたがりますか？

例えば：私は長い/緯度のグーグルマップを持っているが、標準的な構文を使用して作成：マップとその後

 var mymap = new google.maps.Map(document.getElementById('divContainer'), { 
      zoom: 17, 
      center: new google.maps.LatLng(-37, 144), 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      fullscreenControl: true, 
      streetViewControl: false 
     }); 

使用は/マップ上にマウスを実行して、ボックスの場合はストリートビューを見ることができましたdivのいずれかの側に座って周りのマウスの周りに従って

Answer 1

これは興味深い使用例です。私はそれをすることができると思います。

あなたはStreetViewPanorama classでそれを行うことができます - あなたはストリートビューのコンテナに2つ目のオプション（StreetViewPanoramaOptions object）であるだろうHTML要素を渡す最初の引数として

その後、我々はmousemoveをキャプチャする必要がありますカーソルが表示されたらLatLngBoundsを取得し、位置をsetPosition()メソッドで更新します。位置を更新しながらの視点を何とか回転させたい場合は、setPov()メソッド（参照）を使用してください（StreetViewPanoramaクラスを参照）。

あなたは小さなストリートビューウィンドウ（パノラマ）を移動するために世話をする別のコードを持つことができますが、これは私はあなたに残して:)

のは、次の例に見てみましょう：

function initialize() { 
 
    var fenway = { 
 
    lat: 42.345573, 
 
    lng: -71.098326 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: fenway, 
 
    zoom: 14 
 
    }); 
 
    var panorama = new google.maps.StreetViewPanorama(
 
    document.getElementById('pano'), { 
 
     position: fenway, 
 
     pov: { 
 
     heading: 34, 
 
     pitch: 10 
 
     } 
 
    }); 
 
    map.setStreetView(panorama); 
 

 
    google.maps.event.addListener(map, 'mousemove', function(e) { 
 
    panorama.setPosition(e.latLng); 
 
    }); 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#map, 
 
#pano { 
 
    float: left; 
 
    height: 100%; 
 
    width: 45%; 
 
}

<script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"> 
 
</script> 
 

 
<div id="map"></div> 
 
<div id="pano"></div>

が、これはあなたのために働くなら、私に教えてください。これは特定のユースケースを実装するのに役立つアイデアですが、まさに正しい解決策ではないかもしれませんが、今出発点があることを祈っています:)