Question

我已建立以下代码以在我的网站中呈现地图。在任何区域中单击地图时，会弹出一个信息窗口，其中包含一些超链接，用于打开包含表单的网站。我想利用fancybox在叠加层中打开这个链接“表单”。我没有成功使Fancybox工作（版本1.3.4），并且已经读过它不支持在iframe中调用该函数。我想知道这是否是问题，如果有另一种方式来使用fancybox（或其他覆盖选项）？也许是一个事件听众或回调 - 任何提示将不胜感激！

<style>
    #map-canvas { width:850px; height:600px; }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script src="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/src/fusiontips.js" type="text/javascript"></script>

<script type="text/javascript">
    var map;
        var tableid = "1nDFsxuYxr54viD_fuH7fGm1QRZRdcxFKbSwwRjk";
    var layer;
    var initialLocation;
    var browserSupportFlag =  new Boolean();
    var uscenter = new google.maps.LatLng(37.6970, -91.8096);

    function initialize() {
        map = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        layer = new google.maps.FusionTablesLayer({
            query: {
                select: "'Geometry'",
                from: tableid
            },
            map: map
        });

                //http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/docs/reference.html
                layer.enableMapTips({
                    select: "'Contact Name','Contact Title','Contact Location','Contact Phone'", 
                    from: tableid,
                    geometryColumn: 'Geometry',
                    suppressMapTips: false,
                    delay: 500,
                    tolerance: 8
                });
            ;
        // Try W3C Geolocation (Preferred) 
        if(navigator.geolocation) {
            browserSupportFlag = true;
            navigator.geolocation.getCurrentPosition(function(position) {
                initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                map.setCenter(initialLocation);

                                //Custom Marker
                                var pinColor = "A83C0A";
                    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
                        new google.maps.Size(21, 34),
                        new google.maps.Point(0,0),
                        new google.maps.Point(10, 34));
                                var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
                        new google.maps.Size(40, 37),
                        new google.maps.Point(0, 0),
                        new google.maps.Point(12, 35));

                new google.maps.Marker({
                    position: initialLocation,
                    map: map,
                                        icon: pinImage,
                                        shadow: pinShadow
                });
            }, function() {
                handleNoGeolocation(browserSupportFlag);
            });
        }
        // Browser doesn't support Geolocation
        else {
            browserSupportFlag = false;
            handleNoGeolocation(browserSupportFlag);
        }

        function handleNoGeolocation(errorFlag) {
            if (errorFlag == true) {
                //Geolocation service failed
                initialLocation = uscenter;
            } else {
                //Browser doesn't support geolocation
                initialLocation = uscenter;
            }
            map.setCenter(initialLocation);
        } 
    }

google.maps.event.addDomListener(window, 'load', initialize);

</script>

升级到Fancybox版本2解决。

Answer 1

查看您的demo site我认为您需要解决一些问题。

首先，此代码适用于您的方案

$(document).ready(function(){
  $("a.form-modal").fancybox({
 // I would suggested to set some dimensions to the iframe (try without them first if you want)
    width: 640, // or whatever
    height: 320, 
    type : "iframe"
  });
}); // ready

注意我无视 Dr.Molle 建议使用.on()，因为您似乎正在使用Fancybox v2.x，它使用的是live方法。

第二次：根据您使用的版本链接正确的Fancybox的CSS样式表...当您使用fancybox v2.1.3时，您正在链接到fancybox v1.3.4 CSS样式表< / p>

第三：使用单个jQuery实例（理想情况下是最新版本）。目前您正在加载两个v1.5.2和v1.7

...还要确保在任何其他js插件之前加载jQuery，这样你就可以避免这种类型的js错误

Timestamp: 26/10/2012 11:54:49 AM
Error: TypeError: jQuery("ul.sf-menu").superfish is not a function
Source File: https://sitepreview.na14.force.com/contact-us
Line: 756

Answer 2

这对我有用（使用fancybox2）

jQuery(function($){
 $('#map-canvas')
  .on('click',
      'a.video-modal',
      function(e){
        e.preventDefault();
        $(this).data('fancybox-type','iframe');
        $.fancybox(this);
     });
  });

所有链接都具有相同的类（视频模式），因此您只需：

观察点击这些链接以及何时发生：
将链接的data-fancybox-type设置为“iframe”
通过提供link-object作为参数

需要Google Map InfoWindow超链接才能在叠加层中打开内容（Fusion Table Usage）

2 个答案: