Question

如果正在显示帧图像，我们是否可以制作以下Google地图交互。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<input type="button" onclick="$('#frame_image').show();" value="Show frame layer">
<input type="button" onclick="$('#frame_image').hide();" value="Hide frame layer">
<br /><br />

<div style="position: absolute; z-index: 1;">
    <iframe frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&amp;aq=&amp;sll=43.656877,-79.32085&amp;sspn=0.852471,2.113495&amp;ie=UTF8&amp;hq=&amp;hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&amp;t=m&amp;z=14&amp;ll=43.67111,-79.395217&amp;output=embed&iwloc=near" ></iframe>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
    <small><a href="https://maps.google.ca/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&amp;aq=&amp;sll=43.656877,-79.32085&amp;sspn=0.852471,2.113495&amp;ie=UTF8&amp;hq=&amp;hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&amp;t=m&amp;z=14&amp;ll=43.67111,-79.395217" style="color:#0000FF;text-align:left" target="_blank">View Larger Map</a></small>
</div>

<div style="position: absolute; color:red; z-index: 2" id="frame_image">
    <img src="http://torontoclinic.awkwardhosting.com/images/frame.gif" />
</div>

代码也在以下链接： http://jsfiddle.net/pPrZV/

如果有任何其他方式通过Google Maps API等，请通知我。感谢

Answer 1

只需将此款式应用于Google地图的<iframe>

即可

<iframe style =“border-radius：250px” frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no"...

Working jsFiddle here

带有z-index的交互式HTML参考

1 个答案: