Question

我正在尝试获取Google街景图像并使用featherlight将它们显示在灯箱中。基于用户选择的地图图标动态地定义图像。

我的图片显示没有问题，但灯箱冻结了一秒钟，然后返回一页随机字符，好像图像已尝试读取为文本一样。

我的代码示例如下：

let streetView_imgURL = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" +
    props.Latitude + "," + props.Longitude + "&key=MYKEY";

document.getElementById("selectedSchool").innerHTML = (props ? 
"<div class='imgbox'>" +
    "<img style='width:100%;' data-featherlight='" + streetView_imgURL + "'src='"
    + streetView_imgURL + "'>"

Answer 1

如果我理解你的问题，试试这个： http://jsfiddle.net/markovica/1njee7ah/2/

<style>.gsv-screenshot {display: none}</style>    
<a href=".gsv-screenshot" class="" data-featherlight>Click Me</a>
<div class="lightbox gsv-screenshot">
    <i class="featherlight-close fa fa-close"></i>
    <img style='width:100%;' src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=44.8165107,20.4603276">
</div>

找到一种以这种方式生成项目的方法。它似乎没有问题。

与谷歌街景图像的羽毛灯

1 个答案: