Question

我想在我的网站上使用我的办公室的地图图片，但我希望用户可以选择点击图片以在灯箱中提取谷歌地图位置。 ...

我已经查看了这里的问题以找到答案，但似乎无法找到它！

基本上，我有：

<a href="http://maps.google.co.uk/maps?q=????????&hl=en&sll=???????,-???????1&sspn=??.??????,??.5??????&z=??" target="_blank"><img src="css/images/map.gif" width="655" height="320" /></a>

Map.gif是一个GIF动画。我目前在页面上唯一的javascript是

<script type='text/javascript' src='jquery-1.4.3.min.js'></script>
<script type="text/javascript">
$(function(){  // $(document).ready shorthand
$('#map').hide().fadeIn(2000);
});
</script>

将图像淡入屏幕。任何想法!!

由于 JD

Answer 1

这是我处理此类活动的方式

将<div id='lightbox' class='white_content'></div>和<div id='fade' class='class='black_overlay'></div>插入您的html文件。

2.你的灯箱的CSS：

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 650px;
    height: 500px;
    padding: 16px;
    border: 16px solid white;
    border-radius: 15px;
    background-color: white;
    z-index:1002;
    overflow: auto;
    -moz-box-shadow: 5px 5px 10px black;
    -webkit-box-shadow: 5px 5px 10px black;
    box-shadow: 5px 5px 10px black;
}
   .black_overlay{
    display: none;
    position: absolute;
        top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.5;
    opacity:.50;
    filter: alpha(opacity=100);
}

最后你需要一个javascript：

function showLightBox() { document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'; }

如果要隐藏灯箱，可以设置要调用的自定义功能，即设置document.getElementById('light').style.display='none';和document.getElementById('fade').style.display='none';

要在您的灯箱内获取Google地图，请在您的javascript中使用以下代码：

document.getElementById('light').innerHTML = " content to show here ";

将内容推送到您的灯箱。 Normaly你使用Ajax将内容发送到灯箱

如果您不知道如何嵌入谷歌地图，可以在此处查看文档：

http://code.google.com/apis/maps/documentation/javascript/

谷歌地图灯箱

1 个答案: