Question

我已经提取了我的代码并粘贴在下面。可能有Google或Lightbox未定义，但我不知道如何将它们放在下面的代码中。我想在Lightbox弹出窗口上显示谷歌地图，但我失败了。 它只显示带有空地图的灯箱弹出窗口。你有任何提示吗？我有什么遗失吗？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name = "viewport" content = "width = device-width, initial-scale = 1">
       <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/lightbox.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YourAPIKey"  type="text/javascript"></script>
    </head>
    <body onload="javascript:onLoad();">
    <div class="container">
        <h4><a href="javascript:;" onclick="javascript:showBranchesMapBtn(22.248354, 114.155838);">Aberdeen</a></h4>

        <div style="display: none">
            <div id="showBranchesMap"><a id="showBranchesMap_a" style="display:none;" title="Show Branches Map" rel="lightbox" href="#showBranchesMap"></a>
                <div id="atmBranchesMap">
                    <div class="atmMapTop"></div>
                    <div class="atmMapBody clearfix">
                                    <!-- End of Legend and Sub-services Icons -->
                        <div class="wrap">
                            <div class="pane aeonBranchesMap">
                                <div id="map_canvas" class="atmMapSize"></div>
                            </div>              
                        </div>
                    </div>
                    <div class="atmMapBottom"></div>
                </div>
            </div>
        </div>
    <div>
    <script type="text/javascript">

/* jQuery migration from 1.3 to 1.10 */
jQuery.uaMatch = function( ua ) {
    ua = ua.toLowerCase();

    var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
        /(msie) ([\w.]+)/.exec( ua ) ||
        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
        [];

    return {
        browser: match[ 1 ] || "",
        version: match[ 2 ] || "0"
    };
};

matched = jQuery.uaMatch( navigator.userAgent );
browser = {};

if ( matched.browser ) {
    browser[ matched.browser ] = true;
    browser.version = matched.version;
}

// Chrome is Webkit, but Webkit is also Safari.
if ( browser.chrome ) {
    browser.webkit = true;
} else if ( browser.webkit ) {
    browser.safari = true;
}

jQuery.browser = browser;
/* end of migration */
    var lightbox={};
lightbox.status=0;
lightbox.contentId=false;
lightbox.selector='a[rel=lightbox]';
lightbox.width=472;
lightbox.height=300;
lightbox.ini=function(){
    //$(lightbox.selector).click(function(e){
    //  e.preventDefault(); 
    //  lightbox.open(e.target.parentNode);
    //});
};
lightbox.open=function(element){
    if(element=="undefined" || element==null) return;
    lightbox.status=1;
    lightbox.overlay();

    $('<div id="lightbox" />').appendTo('body').css({
        'width':lightbox.width,
        'height':lightbox.height,
        'z-index':11000
    }).append('<div class="close"><a href="#">Close</a></div>').center();

    $('#lightbox .close').click(function(e){
        e.preventDefault();
        lightbox.close();
    });

    if(element.title)
        $('#lightbox .title').html(element.title);

    $('#lightbox').append('<div id="lightbox_content" />');

    if(element.href.indexOf('#')>-1){
        var id=element.href.substring(element.href.indexOf('#')+1);
        lightbox.contentId=id;
        var $content=$('#'+id);

        $content.css({display: 'block'});
        $content.appendTo('#lightbox_content').show();
        $('#lightbox').width($content.width()).height($content.height()+50).center();
        $(window).unbind('scroll').scroll(lightbox.relocate).resize(lightbox.relocate);
    }
}
lightbox.overlay=function(){

    var w_width=$(document).width();
    var w_height=$(document).height();

    if($.browser.msie && parseInt($.browser.version)==6)
        w_width=w_width-8;

    $('#overlay').remove();
    $('<div id="overlay" />').appendTo('body').css({
        'width':w_width,
        'height':w_height
    }).click(lightbox.close);

    // IE6 select box fix
    if ($.browser.msie && parseInt($.browser.version)<=6){
        $('select').css('visibility','hidden');
        $('.popup select').css('visibility','visible');
    }

    $('body').css('overflow-x','hidden');
}

lightbox.close=function(){

    if(lightbox.contentId!=false){
        $('#'+lightbox.contentId).hide().appendTo('body');
        lightbox.contentId=false;
    }


    $('#overlay, #lightbox').remove();

    // IE6 select box fix
    if ($.browser.msie && parseInt($.browser.version)<=6)
        $('select').css('visibility','visible');

    lightbox.status=0;

    $('body').css('overflow-x','visible');
}
    function showBranchesMapBtn(){
        var a = document.getElementById("showBranchesMap_a");
        lightbox.open(a);
        var myOptions = {
            zoom: 10,
            center: new google.maps.LatLng(22.399602,114.090271),
            panControl: false,
            zoomControl: true,
            mapTypeControl: false,
            scaleControl: true,
            streetViewControl: true,

            navigationControl: false,
            overviewMapControl: false,
            scrollwheel: false,

            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        this.map.panTo(new google.maps.LatLng(lat, lng));
        this.map.setZoom(19);
    }
</script>
    </body>
    </html>

Answer 1

使用灯箱但你没有导入lightbox.js。

如何导入并重新测试？

尝试在灯箱上显示谷歌地图但未能显示

1 个答案: