0

私はJavaスクリプトの操作の初期段階にあり、GoogleMapsAPIv3を使用するための小さなアプリケーションをasp.netに作成しました。地図をパネルに表示したい。これは私が書いたコードですが、JavaスクリプトをPanelのOnLoadイベントにバインドする際に問題があります。

<%@ 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>

エラー：ASP.default_aspx' does not contain a definition for 'init'

私はそれを間違った方法でバインドしていると思います。提案をお願いします。

4

1 に答える 1

1

PanelOnLoadプロパティは、Loadイベントのサーバー側ハンドラーを設定するためのものです（ページクラスのメソッドである必要があります）。

Panelコントロールでクライアント側のloadイベントを設定する方法はありません。これは、DIV要素を生成するためです（DIV要素はloadイベントをサポートしていません）。

これを回避する基本的な方法は、BODY要素のクライアント側のロードイベントを使用することです。

<body onload="init();" >
    ...
</body>

しかし、はるかに優れた方法は、DOMの準備ができて関数を呼び出すのを待つことです。これを行う簡単でクロスブラウザの方法は、jQueryのようなライブラリを使用することです。

<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>
于 2012-09-03T07:23:35.353 に答える