Будет ли плагин Google Планета Земля работать на странице с поддержкой ASP.NET Ajax? - PullRequest
0 голосов
/ 27 июня 2011

Я загрузил плагин Google Планета Земля в HTML-страницу, и все работает нормально. Как только я загружаю его на страницу Ajax, он не будет работать. Существуют ли особые требования для его работы? Вот копия моего кода.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Ajax.aspx.vb" Inherits="Ajax" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!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 id="Head1" runat="server">
      <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
             <title>Simple Example</title>
                     <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA5a4NhilcmrdMQ5e3o22QWRQWrGbhbxAguaJ-a4SLWYiya7Z2NRTDfQBdxmHdf5ydkZYLZTiz1tDXfg"></script>
                     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>        
                     <!-- earth-api-utility-library dependencies -->        
                     <script type="text/javascript" src="http://geojs.googlecode.com/svn/trunk/dist/geo.pack.js"></script>        
                     <script type="text/javascript" src="http://earth-api-utility-library.googlecode.com/svn/trunk/extensions/dist/extensions.pack.js">        </script>        
                     <!-- kmltree source files -->         
                     <link rel="stylesheet" href="kmltree.css" media="screen">
                     <script type="text/javascript" src="kmltree.min.js"></script>                
                     <script type="text/javascript">
                         google.load("earth", "1");
                         function init() {
                             google.earth.createInstance('map3d', initCB, failureCB);
                          }
                         function initCB(instance) {
                             ge = instance;
                             ge.getWindow().setVisibility(true);
                             var gex = gex = new GEarthExtensions(ge);
                             var tree = kmltree({
                                 url: 'http://kmltree.googlecode.com/hg/examples/kml/hello.kml',
                                 gex: gex,
                                 mapElement: $('#map3d'),
                                 element: $('#tree')
                             });
                             tree.load();
                         }
                         function failureCB(errorCode) {
                             alert('failed to load plugin');
                         }
                         $(document).ready(init);                    
                     </script>

    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="MainScriptManager" runat="server" />
        <table class="style1">
            <tr>
                <td rowspan="2" width="250px">

                    <asp:Accordion ID="Accordion2" runat="server" SelectedIndex="0">
                    <Panes>
                        <asp:AccordionPane ID="AccordionPane1" runat="server">
                        <Header>
                        <a href="" onclick="return false;">Section 1</a>
                        </Header>
                        <Content>
        <div id="tree" style="float:left; width:250px; height: 400px;"></div>
                        </Content>
                        </asp:AccordionPane>
                        <asp:AccordionPane ID="AccordionPane2" runat="server">
                                                <Header>
                        <a href="" onclick="return false;">Section 2</a>
                        </Header>
                        <Content>
                        fgh
                        </Content>
                        </asp:AccordionPane>
                        <asp:AccordionPane ID="AccordionPane3" runat="server">
                                                <Header>
                        <a href="" onclick="return false;">Section 3</a>
                        </Header>
                        <Content>
                        zxc
                        </Content>
                        </asp:AccordionPane>
                        <asp:AccordionPane ID="AccordionPane4" runat="server">
                                                <Header>
                        <a href="" onclick="return false;">Section 4</a>
                        </Header>
                        <Content>
                        mbc
                        </Content>
                        </asp:AccordionPane>
                    </Panes>
                    </asp:Accordion>

                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td>
                    <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
                        <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
                        <ContentTemplate>
                        id="map3d"
                            <!--    <div> id="map3d" style="float:left; height: 400px; width: 600px;"</div>-->
                                </ContentTemplate>
                        </asp:TabPanel>
                        <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
                        </asp:TabPanel>
                        <asp:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
                        </asp:TabPanel>
                    </asp:TabContainer>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

1 Ответ

0 голосов
/ 30 августа 2011

Проблема в том, что в вашем коде не указан элемент, содержащий.В вашей функции инициализации вы указываете, что плагин должен быть загружен в элемент с идентификатором map3d, т.е.

google.earth.createInstance('map3d', initCB, failureCB);

Однако в документе нет элемента с идентификатором map3d, я вижу, чтоВы закомментировали часть кода здесь:

 id="map3d"
<!--    <div> id="map3d" style="float:left; height: 400px; width: 600px;"</div>-->

Если вы раскомментируете этот div, он должен работать.В противном случае указывается идентификатор, который существует в качестве первого параметра в DOM при вызове метода createInstance().например,

<div id="map3d" style="float:left; height: 400px; width: 600px;"></div>
...