Place API - 将地点照片作为标记图标答案

【问题标题】：Place API - getting place photo as marker iconPlace API - 将地点照片作为标记图标
【发布时间】：2017-07-07 17:49:49
【问题描述】：

我遵循本指南 https://developers.google.com/maps/documentation/javascript/places#places_photos 创建地点照片作为标记图标。这是我的地图初始化代码：

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-07-07============

感谢您的回答和修复
看来问题解决了。我的小提琴现在正在工作 https://issuetracker.google.com/issues/63298126

标记为已修复
好消息！我们已经解决了这个问题。谢谢你的耐心。

快乐的映射！

【问题讨论】：

FWIW，我目前遇到了完全相同的问题。可能是 Google 端的临时问题。

标签： google-maps google-places-api

【解决方案1】：

您看到的错误似乎是由 Google 方面的一些问题引起的。它也影响了很多其他用户，看看他们的公共问题跟踪器：

感谢您报告此问题。我们验证了它，我们将继续跟踪它。 https://issuetracker.google.com/issues/63298126

更新（2017-07-06）：

我们的发布过程中正在对此进行修复，它应该很快就会发布 - 最迟可能在星期一。 https://issuetracker.google.com/issues/63298126#comment13

【讨论】：

【解决方案2】：

遇到了同样的问题，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");
        }
      }

【讨论】：

我也随机开始使用 google 地方图像来运行它。您的解决方案为我解决了它！ 5 小时前，完美男人救了我的命！

【解决方案3】：

我也使用 google places 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,
  };
}

【讨论】：