从 Google Maps POI 调用 Fancybox

Question

我正在构建一个页面，它将文本文件中的 gpx 轨迹点作为 POI 加载到 Google 地图图层中。当用户点击 POI 时，他们会看到从该位置拍摄的照片的缩略图。我想要发生的是当用户单击缩略图时，Fancybox 会弹出更大版本的照片。这可能不起作用，因为在加载页面时尚未创建弹出窗口。看来我需要将我的 jQuery 代码添加到事件侦听器，但我不知道怎么做。我的非工作代码是：

<script type="text/javascript">
    var map;

    function init() {
        map = new OpenLayers.Map('map');
        map.addControl(new OpenLayers.Control.LayerSwitcher());

        var gphy = new OpenLayers.Layer.Google(
            "Google Physical",
            {type: G_PHYSICAL_MAP}
        );
        var gmap = new OpenLayers.Layer.Google(
            "Google Streets", // the default
            {numZoomLevels: 20}
        );
        var ghyb = new OpenLayers.Layer.Google(
            "Google Hybrid",
            {type: G_HYBRID_MAP, numZoomLevels: 20}
        );
        var gsat = new OpenLayers.Layer.Google(
            "Google Satellite",
            {type: G_SATELLITE_MAP, numZoomLevels: 22}
        );

        var pois = new OpenLayers.Layer.Text( "My Points",
                { location:"ella_trip_waypoints.txt",
                  projection: map.displayProjection
                });
        map.addLayer(pois);



        map.addLayers([gphy, gmap, ghyb, gsat, pois]);

        map.setCenter(new OpenLayers.LonLat(-3.98600, 53.12540), 13);

google.maps.event.addListener(marker, 'click', function(){
// Call Fancybox, but how?
});

    }


</script>

您可以查看该页面：http://ian-barton.com/fancybox/google.html

Answer 1

由于您在同一个文档中使用多个实例，因此您不能使用相同的 ID（ID 在文档中应该是唯一的）...改用类 见http://fancybox.net/faq7号

所以你会在每个标记上都有

<a class="simpletitle" href="path/image.jpg"><img alt="whatever" src="path/thumb.jpg" /></a>

然后是脚本：

$("#map").delegate("a.simpletitle", "click", function(event){
event.preventDefault();
$.fancybox(this);
}); 

将fancybox绑定到该容器中当前或未来的元素，id="map"

注意事项： 如果您想添加 fancybox API 选项，请使用此格式

$("#map").delegate("a.simpletitle", "click", function(event){
 event.preventDefault();
 $.fancybox(this,{
  'titlePosition': 'inside'
 });
}); 

上面的脚本在内容是图片时有效

对于其他类型的内容（例如外部 html 页面），您可以使用以下脚本：

$("#map").delegate( "a.simpletitle", "click",function(event){
 event.preventDefault();
 $.fancybox({
  'href': this.href,
  'titlePosition': 'inside',
  'width': 640,
  'height': 360,
  'type':'iframe'
 });
});