GoogleMaps Street viewのAPIで遊んでみました。
ドキュメントは英語しかないですが、触ってみるとすごくかんたんですね。
ためしに作ってみたのは、前方に向かって自動で前進し続けるもの。銀座8丁目から中央通り。 ストリートビューのなかをドラッグしてアングルを変えると、その方向へ方向転換して進みます。交差点で方向転換したいときは事前にそっちを向いておくと吉。 動きを止めたいときはstopボタンをどうぞ。
var panorama; var timer; var start_n = 35.667931; var start_e = 139.761552; var isMoving = true; var map function load() { panorama = new GStreetviewPanorama(document.getElementById("pano")); panorama.setLocationAndPOV(new GLatLng(start_n, start_e), {yaw: 45, pitch: 0, zoom: 0}); timer = window.setInterval(moveNext, 2000); map = new GMap(document.getElementById('map')); map.centerAndZoom(new GPoint(start_e, start_n), -1); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); GEvent.addListener(panorama, "initialized", function(location) { lat = location.latlng.lat(); lng = location.latlng.lng(); document.getElementById('nowPos').innerHTML = lat + ' / ' + lng; map.panTo(location.latlng); var marker = new GMarker(new GPoint(lng, lat)); map.clearOverlays(); map.addOverlay(marker); } ); GEvent.addListener(panorama, "yawchanged", function(yaw) { document.getElementById('dir').value = yaw; } ); } function moveNext() { if(isMoving){ var dir = document.getElementById('dir').value; panorama.followLink(dir); } } function toggleSwitch(){ isMoving = (! isMoving); if(isMoving){ document.getElementById('moveSwitch').value = 'stop'; } else{ document.getElementById('moveSwitch').value = 'move'; } }
ドキュメントは英語しかないですが、触ってみるとすごくかんたんですね。
ためしに作ってみたのは、前方に向かって自動で前進し続けるもの。銀座8丁目から中央通り。 ストリートビューのなかをドラッグしてアングルを変えると、その方向へ方向転換して進みます。交差点で方向転換したいときは事前にそっちを向いておくと吉。 動きを止めたいときはstopボタンをどうぞ。
var panorama; var timer; var start_n = 35.667931; var start_e = 139.761552; var isMoving = true; var map function load() { panorama = new GStreetviewPanorama(document.getElementById("pano")); panorama.setLocationAndPOV(new GLatLng(start_n, start_e), {yaw: 45, pitch: 0, zoom: 0}); timer = window.setInterval(moveNext, 2000); map = new GMap(document.getElementById('map')); map.centerAndZoom(new GPoint(start_e, start_n), -1); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); GEvent.addListener(panorama, "initialized", function(location) { lat = location.latlng.lat(); lng = location.latlng.lng(); document.getElementById('nowPos').innerHTML = lat + ' / ' + lng; map.panTo(location.latlng); var marker = new GMarker(new GPoint(lng, lat)); map.clearOverlays(); map.addOverlay(marker); } ); GEvent.addListener(panorama, "yawchanged", function(yaw) { document.getElementById('dir').value = yaw; } ); } function moveNext() { if(isMoving){ var dir = document.getElementById('dir').value; panorama.followLink(dir); } } function toggleSwitch(){ isMoving = (! isMoving); if(isMoving){ document.getElementById('moveSwitch').value = 'stop'; } else{ document.getElementById('moveSwitch').value = 'move'; } }
| パーマリンク
このブログのフィード
