-1

我建立了以下代码来在我的站点中呈现地图。在任何区域单击地图时，会弹出一个信息窗口，其中包含一些内容，包括用于打开包含表单的网站的超链接。我想利用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 解决。

4

2 回答 2

1

查看您的演示站点，我认为您需要解决一些问题。

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

$(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 样式表

第三：使用 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
于 2012-10-26T18:57:31.443 回答
0

这对我有用（使用 fancybox2 ）

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

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

  1. 观察点击这些链接以及何时发生：
  2. 将data-fancybox-type链接设置为“iframe”
  3. 通过提供链接对象作为参数打开fancybox
于 2012-10-26T16:57:56.093 回答