谷歌街景JS計算標題面對標記

我如何得到谷歌卡車的位置和標題正確計算街景標題在這個例子不知何故我不能做panorama.getLocation()它說未知然而在螢火蟲顯示當我做console.log(panorama)並看到對象方法。谷歌街景JS計算標題面對標記

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/

來源

2015-08-18 Roman Toasov

除了@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

來源

2015-08-18 13:44:53 MrUpsidown

你忘記了超時，所以標記顯示在左上角，但我知道如何解決這個問題，但是你的整體答案更接近我最後的方法，我使用起來更容易理解。因此，即使 geocodezip解決方案也能正常工作，因此我會將您的答案標記爲正確。 –

你使用什麼瀏覽器？對我來說，它適用於上面的代碼，沒有超時。我在Chrome/Mac上。 – MrUpsidown

全景是異步的。爲了得到這個位置，等待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

來源

2015-08-18 12:49:59 geocodezip

我只是試着用StreetViewService（它也有效），但這很容易！很好的接受;） – MrUpsidown

我可以爲@Roman Toasov添加他的腳本不能工作的原因，正如你所提到的，異步方面，因此'panorama.getPosition（）'和'marker.getPosition（）'會返回完全相同的值，所以標題總是「0」。 – MrUpsidown

如果你看小提琴，你會看到'setTimeout'的使用，不知道爲什麼這是必要的，或者如果有事件可以用來代替它，但沒有它的標記不正確地錨定在'全景圖'（它會出現在左上角，直到我用鼠標移動街景） – geocodezip

谷歌街景JS計算標題面對標記

回答

相關問題