javascript - 从谷歌地图 api 获取照片
问题描述
我想取回 Google map api 的照片并将它们插入 DOM。在文档中,它根据谁允许取回几个地方的照片并将它们用作标记进行编码
function createPhotoMarker(place) {
var photos = place.photos;
if (!photos) {
return;
}
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
title: place.name,
icon: photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35})
});
}
效果很好,你能告诉我如何找到照片并将其插入 DOM 吗?我尝试过类似的方法,但他不是一个好方法:我的测试。对不起,我的英语不好
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);
// console.log(results[i]);
var btnSuite = document.createElement('button');
createPhoto(results[i]); //photos test !!??
btnSuite.innerHTML = '<b>' + results[i].name + '</b><br>' + results[i].vicinity + '<br>' + '<img src=' + createPhoto(results[i]) + '/>';
btnSuite.id = 'droiteBtns';
droite2.appendChild(btnSuite);
}
}
}
function createPhoto(place) {
var photos = place.photos;
if (!photos) {
return;
}
var photo = photos[0].getUrl({
'maxWidth': 150,
'maxHeight': 150
})
}
谢谢你的帮助
解决方案
你可以试试这个:http: //jsfiddle.net/mervinsamy/m1ejzt7j/
我所做的是创建一个 img 对象,将图像存储在那里,然后将其添加到现有的 div 中。
相关HTML:
<div class="photos-section" id="img-container"></div>
相关JS:
var img = document.createElement("img") //Create object
img.src = photos[0].getUrl({'maxWidth': 100, 'maxHeight': 100}); //store image url as src attribute
document.getElementById("img-container").appendChild(img); //add to existing div
推荐阅读
- c++ - 使用 mingw 遵循简单的 c++ DLL 教程时出错
- javascript - 未定义不是对象(评估“res.data”)。这是什么?
- python - 使用python静默捕获网络摄像头快照
- flow-project - TestEnv 类的作用究竟是什么?
- javascript - nodejs/express/Mongoose js中.find()中的时间戳格式问题
- sql - 与后端同时更改 sql 表/在 prod 中迁移的最佳策略
- python - python的环境变量保存在哪里
- javascript - 带双括号的 return 语句如何工作?
- visual-studio - 如何将 UWP 应用程序编译为独立的 EXE 文件?
- html - 网站图标不出现