Will the Google Earth Plugin work inside of a ASP.NET Ajax enabled page?
I have loaded the Google earth plugin into a html page, and all works fine. As soon as I load it into a Ajax page, it will not work. Are there specific requirements for it to work? Here is a copy of my code.
<%@ Page Language="VB" Aut开发者_如何学PythonoEventWireup="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>
</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>
The issue is that there is no containing element specified in your code. In your init function you specify that the plugin should be loaded into the element with the ID map3d, i.e.
google.earth.createInstance('map3d', initCB, failureCB);
However there is no element with the id map3d in the document, I see that you have commented out part of the code here:
id="map3d"
<!-- <div> id="map3d" style="float:left; height: 400px; width: 600px;"</div>-->
If you uncomment this div it should work. Failing that specify an ID that exists as the first parameter in the DOM when calling the createInstance() method. e.g.
<div id="map3d" style="float:left; height: 400px; width: 600px;"></div>
加载中,请稍侯......
精彩评论