2017-09-06 68 views
0

我想要获取谷歌街景图像,并使用羽毛灯在灯箱中显示它们。图像是根据用户选择哪个地图图标动态定义的。羽毛与谷歌街景图像

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

我的代码示例如下:

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 + "'>" 
+0

一个可行的例子会很棒。 –

回答

0

如果我明白你的问题很好,试试这个: 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> 

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