如何从Google Map API获取地点照片并插入至DOM？

我看出来问题出在哪了——你的createPhoto函数计算出了照片的URL，但没有把这个值返回出去，所以当你在拼接img标签的src时，实际上拿到的是undefined，自然显示不出图片。下面是具体的修正方案：

1. 修正createPhoto函数，确保返回照片URL #

首先要让函数返回生成的照片地址，同时处理没有照片的情况（比如返回一个占位图，避免页面出现无效的img标签）：

function createPhoto(place) {
  var photos = place.photos;
  if (!photos) {
    // 替换成你需要的占位图地址，或者返回空字符串
    return 'https://via.placeholder.com/150?text=No+Photo';
  }
  // 返回生成的照片URL
  return photos[0].getUrl({ 'maxWidth': 150, 'maxHeight': 150 });
}

2. 修改回调函数，正确使用照片URL #

在callback里调用createPhoto拿到地址后，再拼入HTML结构中即可：

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
      restos.push(results[i].name);
      
      var btnSuite = document.createElement('button');
      // 先获取照片URL
      var photoUrl = createPhoto(results[i]);
      // 拼接HTML内容（用模板字符串更清晰）
      btnSuite.innerHTML = `<b>${results[i].name}</b><br>${results[i].vicinity}<br><img src="${photoUrl}" alt="${results[i].name} photo"/>`;
      // 注意：ID必须唯一，建议改用class
      btnSuite.classList.add('droiteBtns');
      droite2.appendChild(btnSuite);
    }
  }
}

额外提示 #

• 你之前给每个按钮都设置了相同的id="droiteBtns"，DOM中ID是唯一标识，重复ID会导致后续操作出问题，建议改用class来统一样式。
• 如果需要更优雅地处理图片加载失败，可以给img标签添加onerror事件，比如：<img src="${photoUrl}" alt="${results[i].name} photo" onerror="this.src='你的占位图地址'"/>

内容的提问来源于stack exchange，提问作者user9134157