1

Google マップ API を使用する asp.net ページを作成しています。このページは、Google マップの初期化を含む head タグに GoogleMap.js をロードします。コード ビハインドでは、Page.ClientScript.RegisterClientScriptBlock() を使用してさらに JavaScript コードを挿入しています (RegisterStartupScript() も試しました)。この関数は、挿入された追加のコードを body タグ内 (GoogleMap.js スクリプトの下) のスクリプト ブロックに配置します。Chrome 開発者ウィンドウを使用して JavaScript をデバッグしていますが、実行シーケンスを確認するためにいくつかのブレーク ポイントを挿入すると、本文のスクリプト ブロックが頭のスクリプトの前に実行されます。だから、私が思っていたように、HTMLページの上から下に順番に進んでいるわけではありません。どうしたの？？？どうすれば修正できますか？そして、組織のために、私は'

問題は、body タグが最初に実行されることです。「map」変数が Google マップのオブジェクトに割り当てられていないため、マーカーが追加されません。

asp.net が生成してクライアント ブラウザに返すコードを次に示します...

</title><link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" /><link href="../css/master.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>




    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>



    <script type="text/javascript">
        var map;

        function initialize() {
            var chicago = new google.maps.LatLng(41.879535, -87.624333);

            var mapOptions = {
                zoom: 4,
                center: chicago,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

            var marker = new google.maps.Marker({
                position: chicago,
                map: map,
                title: "Hello World!"
            });

            $('#Debug').html(CountryDropDownList.children("option").filter(":selected").text().trim());
        }

        $(document).ready(function() {
            initialize();
        });
    </script>

    <script src="SearchTabs.js" type="text/javascript"></script>

    <!--[if gte IE 9]>
    <style type="text/css">
    .gradient {
       filter: none;
    }
    </style>
    <![endif]-->
<style type="text/css">
    .ctl00_MainMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
    .ctl00_MainMenu_1 { text-decoration:none; }
    .ctl00_MainMenu_2 {  }
    .ctl00_MainMenu_3 { font-size:12pt; }
    .ctl00_MainMenu_4 { padding:0px 10px 0px 10px; }

</style></head>
<body>
    <form name="aspnetForm" method="post" action="HertzMap.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="VIEWSTATE_CRAP" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script type="text/javascript">
var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(41.79068,-77.26577),
    map: map,
    title: "WHEEL LOADER/3YD/GEN BKT/DSL            "
});
var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(41.72962,-76.12181),
    map: map,
    title: "CRAWLER LOADER/3/4 YD/GENERAL/DSL       "
});
</script>
4

2 に答える 2

2

見つめている：

$(document).ready(function() {
    initialize();
});

initializeドキュメントが完全に読み込まれるまで、jQuery が の実行を遅らせることを意味します。

scriptただし、要素のすぐ内側にコードを配置すると、すぐに実行されます。これは、まさに今、マーカーで行っていることです: 実際のmapオブジェクトが利用可能になる前にマーカーが初期化されるため、望ましくない結果が生じます。

スクリプトの初期化を の最後initializeまたは 内で呼び出した後に呼び出してみてください$(document).ready。

于 2012-06-20T20:46:31.960 に答える
1

関数initialize()は head で宣言されていますが、ready イベントで呼び出します。これは、ページが読み込まれた後です (すべてが解析され、スクリプトが順番に実行されます)。したがって、本体で呼び出されたコードが最初に実行されます。

頭の中で直接実行したい場合はinitialize()、頭の中に直接入れてください。

あなたの場合、本体で定義された要素にアクセスしているため、これはおそらく問題につながります。したがって、すべての開始点として onReady を使用する必要があります。最初に初期化を実行し、次に本体のスクリプトを初期化/実行します。

于 2012-06-20T20:46:10.723 に答える