谷歌街景JS计算标题到标记

时间:2015-08-18 05:37:48

标签: javascript google-maps-api-3 google-street-view

我如何获得谷歌卡车位置和标题正确计算街道视图标题在这个例子我不能做panorama.getLocation()它说不知道但是在我做console.log(panorama)并看到对象方法时在firebug中显示。

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/

2 个答案:

答案 0 :(得分:2)

全景图是异步的。要获得其位置,请等待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

答案 1 :(得分: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