谷歌地图不能正确显示在选项卡中 [英] google map not appearing correctly in tabpanel

问题描述

嗨！
我想在标签容器的标签面板中显示谷歌地图，但显示不正确.如果我将其放在第一个标签面板中，它可以正常工作，但是当我将其放在其他面板中时，它向左移动一半.显示了地图...您能告诉我如何解决此问题吗..我试图将其放置在第一个选项卡面板中并将第二个选项卡面板作为活动选项卡，然后即使它没有正确显示地图.我也不想在第一个标签面板中显示地图

hi!
i want to show google map in tab panel of tab container.but it is not showing properly.if i put it in 1st tab panel it works fine but when i put it in other panel it move half way left..only half of the map is shown...can u tell me how to fix this problem..i tried to put it in 1st tab panel and put the 2nd tab panel as a active tab then even then its not showing the map properly.i dont want to show map it in 1st tab panel

<asp:TabContainer ID="TabContainer2" runat="server" Width="640px" CssClass="NewsTab" BorderStyle="Double">
 <asp:TabPanel runat="server" ID="mappanel"

        HeaderText="Map">

    <asp:Panel ID="Panel3" runat="server">

         <uc1:GoogleMapForASPNet ID="GoogleMapForASPNet1"  runat="server" />




    <asp:TabPanel runat="server" ID="TabPanel5"

        HeaderText="Property Listing">

   <asp:Panel ID="deaultsearchlistpanel" runat="server">
    <span style="color:#ff6622">
    <div id="Results"  runat="server" ></div>
    </span>
    <asp:GridView ID="propertylistings" runat="server" AutoGenerateColumns="False"

     CssClass="grid-view" BorderWidth="2px" OnRowCreated="gvHover_RowCreated"

     CellPadding="2" Font-Bold="False" Font-Names="Arial" AllowPaging="true"

     PagerSettings-Visible="true" PageSize="2"

          OnPageIndexChanging="GridView1_PageIndexChanging"

         Font-Size="9pt"   GridLines="None" ShowHeader="False">


               <PagerStyle HorizontalAlign=
               "Center" ForeColor="White" Font-Size="Large" BorderStyle="solid"



                />
                <PagerSettings

                 Visible="true"  Mode="NextPrevious"

                 NextPageImageUrl="images/nxt.png"

                 PreviousPageImageUrl="images/back.png" />




                    <asp:TemplateField>

                          <table width='600px' border='1'> <tr ><td colspan='2'><%#Eval("Title")%></td></tr><tr><td><img alt='<%#Eval("Title")%>'  width='90' height='90' src='<%#Eval("ImageName")%>' border='0' /></td><td><%#Eval("Description")%><br/> <br/>Total Area: <%#Eval("TotalArea")%><br/>Status: <%#Eval("Status")%></td></tr><tr><td colspan='2' ><table border='1' ><tr><td ><%#Eval("bid")%> </td><td>

                          <asp:HyperLink ID="details" Text="View Details" runat="server" Target="_search"

                          NavigateUrl='<%# "DetailDescription.aspx?p_id=" + Eval("PropertyID") + "&prop_type=" + Server.UrlEncode(Eval("PropertyType").ToString())  + "&AgentID=" + Eval("AgentID")%>' />
                            </td><td>  Post Comment
                          </td></tr></table></td></tr></table><br/>

aspx.cs

aspx.cs

GoogleMapForASPNet1.GoogleMapObject.APIKey = ConfigurationManager.AppSettings["GoogleAPIKey"];
GoogleMapForASPNet1.GoogleMapObject.APIVersion = "5";
GoogleMapForASPNet1.GoogleMapObject.Width = "600px";
GoogleMapForASPNet1.GoogleMapObject.Height = "600px";
GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;
GoogleMapForASPNet1.GoogleMapObject.CenterPoint = new GooglePoint("CenterPoint", 33.586452327684200, 73.106203079223600);
DataSet ds = (DataSet)Session["obj"];

foreach (DataRow dRow in ds.Tables[0].Rows)
{
    GoogleMapForASPNet1.GoogleMapObject.CenterPoint = new GooglePoint("CenterPoint", Convert.ToDouble(dRow["Latitude"]), Convert.ToDouble(dRow["Longitude"]));
    GoogleMapForASPNet1.GoogleMapObject.APIKey = ConfigurationManager.AppSettings["GoogleAPIKey"];
    GoogleMapForASPNet1.GoogleMapObject.Width = "500px"; // You can also specify percentage(e.g. 80%) here
    GoogleMapForASPNet1.GoogleMapObject.Height = "500px";
    GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;
    GooglePoint GP2 = new GooglePoint();
    GP2.ID = "SimplePushpin";
    GP2.Latitude = Convert.ToDouble(dRow["Latitude"]);
    GP2.Longitude = Convert.ToDouble(dRow["Longitude"]);
    GP2.InfoHTML = "<table cellspacing=''5''><tr><td colspan=''2''>" + dRow["Address"].ToString() + "</td></tr><tr><td><img height=''90'' width=''90'' src=''" + dRow["ImageName"].ToString() + "''border=''0'' /></td><td valign=''top''>price:  " + dRow["Price"].ToString() + "<br>Area:  " + dRow["TotalArea"].ToString() + "<br>City:  " + dRow["City"].ToString() + "</td></tr></table>";
    GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP2);
}

[edit]已将代码从OP注释变成了问题，并添加了代码块-OriginalGriff [/edit]
[edit2]已删除重复的代码-OriginalGriff [/edit2]

[edit]Code moved from OP comment into question, Code Blocks added - OriginalGriff[/edit]
[edit2]Duplicate code removed - OriginalGriff[/edit2]

推荐答案

我认为 GoogleMapForASPNet 是您拥有的自定义控件，并且具有javascript方法会初始化地图(如shabdar的

I assume GoogleMapForASPNet is a custom control you have and has a javascript method which initializes the map (like loadMap(), initMap() or DrawGoogleMap() as in Shabdar''s article or ...) then add OnClientClick attribute to the tab containing googlemap:

<asp:panel id="Panel3" runat="server" OnClientClick="DrawGoogleMap">

DrawGoogleMap()应该是用于初始化地图的实际函数，请记住不要在此处包括括号.
当用户单击选项卡时，这将显示地图.
尽管调用者和被调用者处于不同的控件中，但当它起作用时也不要感到惊讶.发生这种情况的原因是，在实际呈现的页面中，您可以按其原始名称访问所有javascript函数.
最后一点是，您可以使用hiddenfield来保存一个值，该值指示地图是否已初始化，因此，每次用户重新打开选项卡时，地图都不会闪烁并重置为其初始位置.

which DrawGoogleMap() should be the actual function that initializes your map and remember not to include parentheses here.
This makes the map being shown when user clicks on the tab.
And don''t be surprised when it works despite the fact the caller and callee are in different controls. It happens because in actual rendered page you can access all javascript functions by their original name.
And one last hint is that you can use a hiddenfield to save a value indicating whether the map has already been initialized or not so every time the user reopens the tab, the map doesn''t blink and reset to it''s initial location.

这篇关于谷歌地图不能正确显示在选项卡中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！