Google지도와 Google 스트리트 뷰를 사용하는 샘플 코드가 있습니다. ….
<html> <head> <meta charset="utf-8"> <title>Set Pegman position programmatically</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #google_map, #google_streetview { float: left; height: 50%; width: 50%; } </style> </head> <body> <!-- ### The page structure ... --> <div> <form onsubmit="return false;"> Lat: <input type="text" /> Lon: <input type="text" /> <input type="submit" onclick="getLatLon();" /> </form> <script> function getlatLon() { var lat = document.getElementById("lat").value; var lon = document.getElementById("lon").value; } </script> </div> <div></div> <div></div> <script> function initialize() { //### The original pegman position ... var pegman_position = {lat: 42.345573, lng: -71.098326}; var marker; //### Add Google Map ... var google_map = new google.maps.Map(document.getElementById("google_map"), { center: pegman_position, zoom: 14 }); //### Add Google Street View ... var panorama = new google.maps.StreetViewPanorama( document.getElementById("google_streetview"), { position: pegman_position, pov: { heading: 34, pitch: 10 } }); google_map.setStreetView(panorama); panorama.addListener("position_changed", function(){ var latLon = { lat: panorama.getPosition().lat(), lng: panorama.getPosition().lng() }; }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=<PUT_YOUR_API_KEY_HERE>&callback=initialize"> </script> </body> </html> (참고 : “실행하려면”코드 하단에 Google API 키를 넣어야합니다. ….)
약간 수정하고 싶습니다. 위도 / 경도는 두 개의 특정 입력 값 (이 코드는 실제 요구 사항을 시뮬레이션 한 것입니다 …)의 값을 조정하고, 페그 맨이 Google지도에서 이동하고 Stret View 이미지 자체가 업데이트되는 것을 확인합니다.
제안 / 예?
댓글
- POV가 필요합니다. " StreetViewPov 객체가 가장 스트리트 뷰 카메라의 시점을 결정하는 데 자주 사용됩니다. 사진사의 관점을 확인할 수도 있습니다 " developers.google.com/maps/documentation/javascript/streetview
답변
여기 있습니다. https://jsfiddle.net/35rpw0jv/
그리고 이것이 페그 맨 (및지도)을 모든 스트리트 뷰 이동 (위치 변경).
panorama.addListener("position_changed", function(){ map.setCenter(panorama.getPosition()); }); 댓글
- 예 페그 맨에서는 POV가 중요합니다.