嘗試使用Angular 2從localhost訪問街景時的Google街景API API問題

Question

嘗試訪問全景圖時出現以下錯誤。 我隨機遇到了這個錯誤。 就像有時它會發生，有時它不會有人請詳細說明如何解決這個問題。

錯誤：來自'localhost：4200'的' https://lh3.ggpht.com/-GEWinvnWrN8/VgoOwiNcv2I/AAAAAAAAA3w/vhFJX1VOvr4fDNV2JmKDPhUUx08MeBqdwCJkC/x0-y0-z0/p '訪問圖像已被CORS政策阻止：否' Access-Control-Allow-Origin'標頭出現在請求的資源上。 因此不允許原點'localhost：4200'訪問。 響應具有HTTP狀態代碼403。

嘗試訪問我使用DRF構建的API時，我收到此CORS錯誤。 但后來我在我的API上使用中間件解決了它。 如果Google不在同一個域中，那么谷歌不允許我訪問這些圖像對我來說聽起來不合邏輯。 我正在研究Angular 2.這是我在用戶輸入x = lat和y = lon時調用的代碼。

    var map = new google.maps.Map(document.getElementById('map'), {
             zoom: 15,
             center: {lat: this.x, lng: this.y}
           });
    var panorama = new google.maps.StreetViewPanorama(
                 document.getElementById('pano'), {
                   position:  {lat: this.x, lng: this.y},
                   pov: {
                     heading: 34,
                     pitch: 10
                   }
                 });
    var cafeMarker = new google.maps.Marker({
                       position: {lat: this.x, lng: this.y},
                       map: map,
                       icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
                       title: 'Canteen'
                   });
                   panorama.addListener('position_changed', function() {
                 console.log(panorama.getPosition().lat() +" " + panorama.getPosition().lon());
            });

map.setStreetView(panorama);`

Answer 1

在index.html中檢查您對google API的引用應該是：

src="https://maps.google.com/maps/api/js?key=YOUR-KEY">

（注意http S ）