Question

我在弹出窗口中加载Google静态地图并动态设置图片的图片网址。源代码显示正确的地址，但在页面加载时未显示在页面上。如果我将鼠标悬停在Image的源代码中，则会将其加载到源代码（在Firefox中为e.i.Firebug）中，如果我重新打开弹出窗口，则Image会成功加载。请说明为什么它没有第一次加载。

第1步打开我的页面

步骤2单击地图。这是空白的

步骤3如果我们在Firebug中查看此静态地图图像的HTMl代码，那么

鼠标上的第4步到图像源代码，图像加载但静态图像弹出窗口仍然没有任何内容 Click To See Image

步骤5关闭弹出窗口

步骤6如果我们再次打开Map弹出窗口，Image会成功加载 Click To See Image

图像无法加载直到我们不将鼠标悬停在Firebug中的Image的HTML源代码上。请在这个案例中建议。

代码源代码：

                       <tr> 
                        <td width=""114"" height=""22""> 
                            <asp:Localize runat=""server"" ID=""locPickUpLocation"" Text=""Pick-up Location:"" meta:resourcekey=""locPickUpLocationResource1""></asp:Localize>  
                        </td> 
                        <td width=""182""> 
                            <b> 
                                <asp:Literal ID=""ltPick"" runat=""server"" meta:resourcekey=""ltPickResource1""></asp:Literal> <span id=""divPickMapLink"" runat=""server"" class=""CarMapBut apf""><span><asp:Localize runat=""server"" ID=""picklocMap"" Text=""Map"" meta:resourcekey=""picklocMapResource1""></asp:Localize></span></span> 
                            </b> 
                        </td> 
                        <td width=""116"" class=""padlt5""> 
                           <asp:Localize runat=""server"" ID=""locDropOffLocation"" Text=""Drop-off Location:"" meta:resourcekey=""locDropOffLocationResource1""></asp:Localize>   
                        </td> 
                        <td width=""183""> 
                            <b> 
                                <asp:Literal ID=""ltDrop"" runat=""server"" meta:resourcekey=""ltDropResource1""></asp:Literal>  <span id=""divDropMapLink"" runat=""server"" class=""CarMapBut apf""><span><asp:Localize runat=""server"" ID=""droplocMap"" Text=""Map"" meta:resourcekey=""droplocMapResource1""></asp:Localize></span></span> 
                            </b> 
                        </td> 
                    </tr>

代码背后：

            string pickAdd = ltPick.Text.Replace(""<br />"", """");         
            divPickMapLink.Attributes.Add(""onclick"", ""javascript:DisplayMapByAddress('"" + pickAdd + ""');"");         
            ltDrop.Text = carBooking_.GetDropoffLocationDescription("", "");         
            string dropAdd = ltDrop.Text.Replace(""<br />"", """");         
            divDropMapLink.Attributes.Add(""onclick"", ""javascript:DisplayMapByAddress('"" + dropAdd + ""');"");

HTML PAGE
GoogleMapStatic.htm

<div id=""popup_box"">
<a id=""popupBoxClose"">Close</a>
<div id=""ViewMap"" class=""CarMap"">
<img id=""GoogleStaticImage"" src=""http://maps.googleapis.com/maps/api/staticmap?sensor=false&key=<%= DTIsland.DTCarIslandSettings.CarGoogleMapKey %>&zoom=13&size=600x420&center=New York&markers=color:green%7Clabel:A%7CNew York"" />
</div>
</div>
<div id=""greyBgBkgrnd""></div>

   <script type=""text/javascript"" charset=""utf-8"">   
        $(document).ready(function () {

    $(document).keypress(function (e) {
        if (e.keyCode == 27) { unloadPopupBox(); }
    });

    $('#popupBoxClose').click(function () {
        unloadPopupBox();
    });
});

function unloadPopupBox() { // TO Unload the Popupbox
    $('#popup_box').fadeOut(""slow"");
    $(""#greyBgBkgrnd"").css({ // this is just for style  
        ""opacity"": ""1""
    });
    $('#popup_box').hide();
    CloseGreyBg();
}

function loadPopupBox() {

    // To Load the Popupbox
    $('#popup_box').fadeIn(""slow"");
    $('#popup_box').css({
        ""left"": ""300px"",
        ""top"": ""150px"",
        'zIndex': 400
    });
    $(""#greyBgBkgrnd"").css({ // this is just for style
        ""opacity"": ""0.3""
    });
    DisplayGreyBg();
}

function DisplayGreyBg() {
    var bWidth = ($('body').width()) + 25;
    if ($.browser.msie && $.browser.version == 7) {
        var bWidth = $('body').width();
        $('.filterreg:first').css('z-index', '300');
    }
    var bHeight = $('body').height();
    $('#greyBgBkgrnd').css({ 'width': bWidth + 'px', 'height': bHeight + 'px', 'zIndex': 399, 'background': '#666666', 'opacity': '0.5', 'filter': 'alpha(opacity = 50)', 'position': 'absolute', 'top': '0', 'left': '0' });
    $('#greyBgBkgrnd').fadeIn(""slow"");
    $('body').css('overflow', 'hidden');
    //IE6 Bug with SELECT element always showing up on top
    if ($.browser.msie && $.browser.version < 7) {
        $('select').each(function () {
            $(this).hide();
        });
    }
}

function CloseGreyBg() {
    $('#greyBgBkgrnd').css({ 'width': '0px', 'height': '0px', 'zIndex': -1 });
    $('#greyBgBkgrnd').fadeOut(""slow"");

    if ($.browser.msie && $.browser.version == 7) {
        $('body').css('overflow-y', 'auto');
        $('.filterreg:first').css('z-index', '99998');
    } else {
        $('body').css('overflow', 'auto');
    }
    //IE6 Bug with SELECT element always showing up on top
    if ($.browser.msie && $.browser.version < 7) {
        $('select').each(function () {
            $(this).show();
        });
    }
}

///// Display map on Popup with long, lat
function DisplayMapByLatLong(lat_, long_) {
    loadPopupBox();
    // When map object is created it tries to figure out how big the canvas is and if popup is not fully loaded yet it may get wrong values.
    // So 'loadPopupBox()' function is called before showMap and setTimeout is called to wait till popup is proper loaded
    $('#popupBoxClose').show();
    setTimeout("""", 100);
    var imgsrc = ""http://maps.googleapis.com/maps/api/staticmap?sensor=false&key=<%= DTIsland.DTCarIslandSettings.CarGoogleMapKey %>&zoom=13&size=600x420&center="" + lat_ + "","" + long_ + ""&markers=color:green%7Clabel:A%7C"" + lat_ + "","" + long_;
    $(""#GoogleStaticImage"").attr(""src"", imgsrc);
}

///// Display map on Popup with address
function DisplayMapByAddress(address) {   
    loadPopupBox();
    // When map object is created it tries to figure out how big the canvas is and if popup is not fully loaded yet it may get wrong values.
    // So 'loadPopupBox()' function is called before showMap and setTimeout is called to wait till popup is proper loaded
    $('#popupBoxClose').show();
    setTimeout("""", 100);
    var imgsrc = ""http://maps.googleapis.com/maps/api/staticmap?sensor=false&key=<%= DTIsland.DTCarIslandSettings.CarGoogleMapKey %>&zoom=13&size=600x420&center="" + address + ""&markers=color:green%7Clabel:A%7C"" + address;
    $(""#GoogleStaticImage"").attr(""src"", imgsrc);

  }

</script>                                                                                           





 Problem is with API key for static map. I am using invalid API key.

Google静态地图图片未在弹出窗口中显示

0 个答案: