Google StreetView로 대상 건물을 바라보기

Question

제 질문은 매우 간단합니다.

POV를 타겟팅하는 방법을 알고 싶다면 heading 값이 필요합니다.

sv.getPanoramaByLocation()은 두 화살표의 heading이 포함 된 변수를 반환합니다. 방향이 더 가까워지면 data이 반환됩니다.

그러나 건물을 볼 수있는 방법에 대한 수치는 heading이 아닙니다. streetview에서 마커을 사용하면 건물을 타겟팅 할 수 있습니다. example

아무도 도와 줄 수 있습니까? 네가 원하는 덤프를 만들 수있어.

Answer 1

지오 코드 "보고 싶은 건물"의 주소입니다. geometry librarycomputeHeading (: LatLng, to : LatLng) 함수를 사용하여 StreetView 위치와 건물 사이의 표제를 계산합니다.

related question: Request main road StreetView panoramas instead of back alleys from API

코드의 지침을 사용

는 길 찾기 서비스를 사용

example (Statue of Liberty)

다른 옵션 (지오 코더는 "옥상"지오를 반환한다고 가정) 서비스를 사용하여 길가에있는 "카메라"위치 정보를 얻을 수 있습니다 (이제는 "인테리어"streetvi를 얻을 수있게 됨). EW 위치) 반환

var map; 
 
var berkeley = new google.maps.LatLng(37.869085, -122.254775); 
 
var sv = new google.maps.StreetViewService(); 
 
var geocoder = new google.maps.Geocoder(); 
 
var directionsService = new google.maps.DirectionsService(); 
 
var panorama; 
 
var myLatLng; 
 
var address = "525 Beacon St. Boston, MA"; 
 

 
function initialize() { 
 

 
    panorama = new google.maps.StreetViewPanorama(document.getElementById("pano")); 
 

 

 
    directionsService.route({ 
 
    origin: address, 
 
    destination: address, 
 
    travelMode: google.maps.TravelMode.DRIVING 
 
    }, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     // myLatLng = response.routes[0].legs[0].start_location; 
 
     sv.getPanoramaByLocation(response.routes[0].legs[0].start_location, 50, processSVData); 
 

 
     var marker = new google.maps.Marker({ 
 
     position: response.routes[0].legs[0].start_location, 
 
     map: map, 
 
     title: "Directions" 
 
    }); 
 
     map.setCenter(myLatLng); 
 

 
} else document.getElementById('info').innerHTML += "status:"+status+"<br>"; 
 
    }); 
 

 
    geocoder.geocode({ 
 
    'address': address 
 
    }, geocoderCallback); 
 
    
 
    // Set up the map 
 
    var myOptions = { 
 
    zoom: 15 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map_canvas'), 
 
    myOptions); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
function processSVData(data, status) { 
 
    if (status == google.maps.StreetViewStatus.OK) { 
 

 
    panorama.setPano(data.location.pano); 
 
    var camera = new google.maps.Marker({ 
 
     position: data.location.latLng, 
 
     map: map, 
 
     draggable: true, 
 
     title: "camera" 
 
    }); 
 
    var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, myLatLng); 
 
    document.getElementById('info').innerHTML += "heading:"+heading+"<br>" 
 
    + "location: "+myLatLng.toUrlValue(6)+"<br>" 
 
    + "camera:"+data.location.latLng.toUrlValue(6)+"<br>"; 
 
    
 
    
 
    // alert(data.location.latLng+":"+myLatLng+":"+heading); 
 
    panorama.setPov({ 
 
     heading: heading, 
 
     pitch: 0, 
 
     zoom: 1 
 
    }); 
 
    panorama.setVisible(true); 
 
    } else { 
 
    alert("Street View data not found for this location."); 
 
    } 
 
} 
 

 
function geocoderCallback(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
    myLatLng = results[0].geometry.location; 
 
    map.setCenter(myLatLng); 
 
    if (results[0].geometry.viewport) map.fitBounds(results[0].geometry.viewport); 
 
    else if (results[0].geometry.bounds) map.fitBounds(results[0].geometry.bounds); 
 
    else map.setZoom(15); 
 
    var marker = new google.maps.Marker({ 
 
     position: myLatLng, 
 
     map: map, 
 
     title: address 
 
    });  
 

 
    } else { 
 
    alert("Geocode was not successful for the following reason: " + status); 
 
    } 
 
};

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

<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 

 
<div id="pano" style="width: 425px; height: 400px;float:left"></div> 
 
<div id="info"></div> 
 

 
<div id="map_canvas" style="width: 425px; height: 400px;float:left"></div> 
 
<div id="map_center"></div> 
 
<div id="streetview_pov"></div>