放置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 - 获取地点照片作为标记图标

回答

相关问题