Javascript 无法将java脚本函数与面板';s OnLoad事件
我正处于使用java脚本的初始阶段,我刚刚用asp.net编写了一个使用Google Maps APIv3的小应用程序。我想在面板中显示地图。这是我编写的代码,但在将java脚本与面板的OnLoad事件绑定时遇到问题:Javascript 无法将java脚本函数与面板';s OnLoad事件,javascript,asp.net,panel,Javascript,Asp.net,Panel,我正处于使用java脚本的初始阶段,我刚刚用asp.net编写了一个使用Google Maps APIv3的小应用程序。我想在面板中显示地图。这是我编写的代码,但在将java脚本与面板的OnLoad事件绑定时遇到问题: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>Map Test</title>
<style type="text/css">
html{height:100%}
body{height:100%; margin:0;padding:0}
#map_can{height:100%}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzawerwerQ55N500rxxxxdPNvMoQ74aRYO30Wo&sensor=true">
</script>
<script type="text/javascript">
function init()
{
var mapoptions=
{
center: new google.maps.LatLng(17.379064211298, 78.478946685791),
zoom:8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map_can"),mapoptions);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel OnLoad="init()" ID="Panel1" runat="server"
style="z-index: 1; left: 37px; top: 59px; position: absolute; height: 273px; width: 565px">
<div id="map_can" style="width:100%; height:100%"></div>
</asp:Panel>
</form>
</body>
</html>
地图测试
html{高度:100%}
正文{高度:100%;边距:0;填充:0}
#地图可以{高度:100%}
函数init()
{
var映射选项=
{
中心:新google.maps.LatLng(17.379064211298,78.478946685791),
缩放:8,
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(document.getElementById(“map_-can”)、mapoptions);
}
错误:ASP.default\u aspx'不包含“init”的定义。
我想我把它装订错了。请提供建议。面板
OnLoad
属性用于设置加载事件的服务器端处理程序(它应该是页面类中的方法)
无法在面板控件上设置客户端加载事件,因为它会生成DIV元素(并且DIV元素不支持加载事件)
解决此问题的基本方法是使用BODY元素的客户端加载事件:
<body onload="init();" >
...
</body>
...
但更好的方法是等待DOM准备好调用函数。一种简单且跨浏览器的方法是使用库,如:
$(文档).ready(函数(){
变量映射选项={
中心:新google.maps.LatLng(17.379064211298,78.478946685791),
缩放:8,
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(document.getElementById(“map_-can”)、mapoptions);
});
现在我不想学习JQuery。因此,我可以在BODY的onload事件中加载函数,并在面板中写入div标记,它就可以工作了。但是,如果我还有几个java脚本函数,那么如何在BODY的onload事件中指定它们呢?@Cdeez是什么阻止了您将所有这些函数合并到一个函数中,或者创建一个将调用所有其他函数的通用init函数(还记得这里的全局名称空间争论)。我需要更多地了解您的页面流,以建议适当的架构方法。我在评论中的问题是关于具有多个功能的通用问题。虽然我还没有计划好以后会怎么做,但你的评论让我知道了如何应对。如果我有问题,我会在这里给你回电话。谢谢
<script type="text/javascript">
$(document).ready(function() {
var mapoptions = {
center: new google.maps.LatLng(17.379064211298, 78.478946685791),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_can"),mapoptions);
});
</script>