Google 街景JS计算航向人脸标记

Question

我如何获得 google 卡车位置和航向以正确计算街道视图航向在这个例子中不知何故我无法做到 panorama.getLocation() 它说未知但是当我这样做时显示在 firebug console.log(panorama) 并查看对象方法。

function initialize() {
    var myPlace = {lat: 33.976827,lng: -118.163889};
    var map = new google.maps.Map(document.getElementById('map'), {
        center: myPlace,
        zoom: 18
    });

    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
            position: myPlace          
        });

    marker = new google.maps.Marker({
        position: myPlace,
        map: map
    });

    marker_pano = new google.maps.Marker({
        position: myPlace,
        map: panorama
    });

    var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), marker.getPosition());

    panorama.setPov({
        heading: heading,
        pitch: 0
    });

    map.setStreetView(panorama);

}        

google.maps.event.addDomListener(window, 'load', initialize);

http://jsfiddle.net/z3b4ubb3/

Answer 1

全景是异步的。要获得它的位置，请等待 position_changed 事件触发：

google.maps.event.addListener(panorama, 'position_changed', function () {
    var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), marker.getPosition());
    panorama.setPov({
        heading: heading,
        pitch: 0
    });
});

updated fiddle

Answer 2

除了@geocodezip 解决方案，这里还有另一种实现你想要的方法：

var panorama, myPlace;

function initialize() {

    myPlace = {
        lat: 33.976827,
        lng: -118.163889
    };

    var map = new google.maps.Map(document.getElementById('map'), {
        center: myPlace,
        zoom: 18
    });

    panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
        position: myPlace
    });

    var marker = new google.maps.Marker({
        position: myPlace,
        map: map
    });

    map.setStreetView(panorama);

    var sv = new google.maps.StreetViewService();

    sv.getPanorama({
        location: myPlace,
        radius: 50
    }, processSVData);
}

function processSVData(data, status) {

    if (status === google.maps.StreetViewStatus.OK) {

        var marker_pano = new google.maps.Marker({
            position: myPlace,
            map: panorama
        });

        var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, marker_pano.getPosition());

        panorama.setPov({
            heading: heading,
            pitch: 0
        });
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

JSFiddle demo

Google 街景JS计算航向人脸标记

Google street-view JS calculate heading to face marker

javascript

google-maps-api-3

google-street-view