“未捕獲的TypeError：無法讀取未定義的屬性'lat'”

Question

我試圖在“信息窗口”中顯示“全景視圖”。 但是當嘗試使用“ google.maps.geometry.spherical.computeHeading”時，出現“未捕獲的TypeError：無法讀取未定義的屬性” lat”。

你能檢查出什么問題嗎？

var myMap;
var myMarkerList=[];
var myBound;
var myStreetView;
var radius;
var clickedMarker;
var m_mark;

var initMap = function(){
    var myStyleType = new google.maps.StyledMapType(myStyles,{name: 'Styled Map'});
    myMap = new google.maps.Map(document.getElementById('googleMap'), {
        center:{lat:40.7413549, lng:-73.9980244},
        zoom:13,
        mapTypeControlOptions:{
            mapTypeIds:['roadmap', 'satellite', 'hybrid', 'terrain',
            'styled_map']
        }
    });

    myMap.mapTypes.set('styled_map', myStyleType);
    myMap.setMapTypeId('styled_map');

    google.maps.event.addListener(myMap, 'click', function(event){
        setMarkerList(event.latLng);
        openInfoWindow(event.latLng);
    });
    myBound = new google.maps.LatLngBounds();

            m_mark = new google.maps.Marker({
            position:{lat: 40.7713024, lng: -73.9632393},
            map:myMap,
            title:'Park Ave Penthouse',
            animation: google.maps.Animation.DROP,
            });

            m_mark.addListener('click', function(){
            openStreetView(this);
            clickedMarker = this;
            });


    myStreetView = new google.maps.StreetViewService();
    radius = 50;

}

function setMarkerList(pos){
    var myMarker = new google.maps.Marker({
            position:pos,
            map:myMap,
            animation: google.maps.Animation.DROP,
    });

    myMarker.addListener('click', function(){
        openStreetView(this);
        clickedMarker = this;
    });

    myMarkerList.push(myMarker);

    setBound(myMarker);
}

function openStreetView(targetMarker){

    myStreetView.getPanoramaByLocation(targetMarker.position, radius, getParanomaView);
}

function getParanomaView(data, status){

    var myInfo = new google.maps.InfoWindow();
    if (status = google.maps.StreetViewStatus.OK) {
        var nearStreetViewLocation = data.location.latlng;

        var heading = google.maps.geometry.spherical.computeHeading(nearStreetViewLocation, clickedMarker.position);
        myInfo.setContent('<div>'+clickedMarker.title+'</div><div id="panorama"></div>');
        var panoramaOptions = {
                    position:nearStreetViewLocation,
                    pov: {
                        heading: heading,
                        pitch: 30
                    }
                };
            var panorama = new google.maps.StreetViewPanorama( document.getElementById('panorama'),panoramaOptions);
    }
    else{
        myInfo.setContent('<div>'+clickedMarker.title+'</div><div>No Street View Found</div>');
    }
    myInfo.open(myMap, targetMarker);
}

我對造成這種情況的原因不再有任何預感，所以我將不勝感激。

Answer 1

經過審查（有其他評論）， getParanomaView()函數存在一些問題。 它應該是：

function getParanomaView(data, status){
    var myInfo = new google.maps.InfoWindow();
    if (status == google.maps.StreetViewStatus.OK) {
        var nearStreetViewLocation = data.location.latLng;

        var heading = google.maps.geometry.spherical.computeHeading(nearStreetViewLocation, clickedMarker.getPosition());
        myInfo.setContent('<div>'+clickedMarker.title+'</div><div id="panorama"></div>');
        var panoramaOptions = {
            position:nearStreetViewLocation,
            pov: {
                heading: heading,
                pitch: 30
            }
        };
        var panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'),panoramaOptions);
    } else {
        myInfo.setContent('<div>'+clickedMarker.title+'</div><div>No Street View Found</div>');
    }
    myInfo.open(myMap, targetMarker);
}

上一個答案

該行var heading = google.maps.geometry.spherical.computeHeading(nearStreetViewLocation, clickedMarker.position);

應該

var heading = google.maps.geometry.spherical.computeHeading(nearStreetViewLocation, clickedMarker.getPosition());

否則， clickedMarker.position將是不確定的。