放置API - 獲取地點照片作爲標記圖標

我按照本指南 https://developers.google.com/maps/documentation/javascript/places#places_photos 創建地點照片作爲標記圖標。這是我的地圖初始化代碼：放置API - 獲取地點照片作爲標記圖標

var map; 

function initMap() { 
    // Create a map centered in Pyrmont, Sydney (Australia). 
     map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -6.920812, lng: 107.604116}, 
     zoom: 13 
     }); 

     var request = { 
     location: map.getCenter(), 
     radius: '5000', 
     type: ['shopping_mall'] 
     }; 

     var service = new google.maps.places.PlacesService(map); 
     service.textSearch(request, callback); 
} 

// Checks that the PlacesServiceStatus is OK, and adds a marker 
// using the place ID and location from the PlacesService. 
function callback(results, status) { 
    console.log(results); 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 
     var place = results[i]; 
     createPhotoMarker(place); 
     } 
    } 
} 

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

這是createPhotoMarker功能

function createPhotoMarker(place) { 
     var photos = place.photos; 
     if (!photos) { 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: place.geometry.location, 
      title: place.name 
      }); 
      return; 
     } 

     var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location, 
     title: place.name, 
     icon: photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35}) 
     }); 
}

函數將創建常規標記，如果地方的照片無效。但對於現有的照片的地方，我得到這個錯誤：

無法加載資源：服務器用）的404狀態（ lh3.googleusercontent.com/w35-h35-p/AF1QipOIL6GVVmtqp_cw_hBEQxdILZSa8poMO0HAqFHd=k

迴應而地圖只顯示常規標記。我做錯了什麼？
這是小提琴http://jsfiddle.net/v90fmrhp/

==========更新2017年7月7日============

感謝您的答案和修復
看來問題解決了。現在我的小提琴正在 https://issuetracker.google.com/issues/63298126

標記爲已修復
好消息！我們已經解決了這個問題。謝謝你的耐心。

快樂貼圖！

來源

2017-07-05 zekkai

FWIW，我目前遇到完全相同的問題。可能是Google的暫時性問題。 – deceze

看起來你所看到的錯誤是由谷歌方面的一些問題引起的。它也影響到其他一些用戶，看看他們的公開問題跟蹤器：

感謝您報告此問題。我們對其進行了驗證，我們會繼續跟蹤它。 https://issuetracker.google.com/issues/63298126

更新（2017年7月6日）：

針對此修復程序進入我們的發佈過程，現在，它應該很快就會出來 - 最晚大概週一。 https://issuetracker.google.com/issues/63298126#comment13

來源

2017-07-05 18:19:00

有同樣的問題，並Sulyman建議工作的方法，但我不知道能持續多久，當谷歌修復了這個。

Google Places Photos .GetUrl is adding width and height to url

這是我們所做的事情。

if(place.photos != null){ 
      for(var i = 0; i < place.photos.length; i++){ 
      //Do a string replace to get the w-h-p out of there. 
      var str = place.photos[i].getUrl({"maxWidth": 100, "maxHeight": 100}); 
      var res = str.replace("w100-h100-p", "p"); 
      self.pacPhotos.push({ 
       id : res 

      }); 

      } 
     }else { 
      console.log("no photo"); 
     } 
     }

來源

2017-07-06 13:51:18 DKinnison

我隨機開始使用谷歌地點圖片進行此操作。你的解決方案爲我解決了它！ 5小時前，男人完美救了我的命！ –

我也跑到谷歌的地方api與此。一切都很好，然後隨機停止。這似乎可能是由於谷歌做出了更改，因爲他們準備好發佈更好的地圖api來支持向量了.DKinnison爲我解決了他的問題，所以我只想發佈我的ES6解決方案來解析收到的地方。我評論了我個人沒有使用的其他房產，以防您需要。

const PHOTO_WIDTH = 600; 
const PHOTO_HEIGHT = 600; 

export function parseGooglePlace(place) { 
    if (!place) { 
    return; 
    } 
    const { 
    // address_components, 
    formatted_address, 
    geometry, 
    // icon, 
    // id, 
    // international_phone_number, 
    name, 
    // rating, 
    // reviews, 
    // opening_hours, 
    photos: _photos = [], 
    place_id, 
    // reference, 
    types = [], 
    // url: mapsURL, 
    // utc_offset, 
    // vicinity, 
    website, 
    } = place; 

    const photos = _photos.map(p => 
    p 
     .getUrl({ maxWidth: PHOTO_WIDTH, maxHeight: PHOTO_HEIGHT }) 
     .replace(`w${PHOTO_WIDTH}-h${PHOTO_HEIGHT}-p`, 'p'), 
); 

    return { 
    website, 
    name, 
    photos, 
    address: formatted_address, 
    placeId: place_id, 
    geometry, 
    types, 
    }; 
}

來源

2017-07-06 19:22:46

放置API - 獲取地點照片作爲標記圖標

回答

相關問題