Question

我正在创建一个使用谷歌地图API的asp.net页面。该页面在头标记中加载GoogleMap.js，其中包含谷歌地图初始化内容。在后面的代码中，我使用Page.ClientScript.RegisterClientScriptBlock（）注入了一些更多的javascript代码（我也尝试过RegisterStartupScript（））。此函数将附加注入的代码放在body标记内的脚本块中（在GoogleMap.js脚本下面）。我正在使用Chrome开发人员窗口来调试我的javascript，现在当我抛出一些断点来检查执行顺序时，正文中的脚本块会在头部中的脚本之前执行。所以它不会像我认为的那样按顺序从HTML页面的顶部到底部。这是怎么回事？？？我该如何解决？为了组织起见，我不想在我的页面中为每一段javascript使用RegisterClientScriptBlock（）。

问题是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>

Answer 1

看着：

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

意味着jQuery将延迟initialize的执行，直到文档完全加载为止。

但是，如果您将代码放在script元素内，它将立即执行。这正是您现在对标记所做的事情：它们在实际map对象可用之前被初始化，这会导致不良结果。

尝试在initialize的末尾或在$(document).ready内调用脚本初始化之后调用脚本初始化。

Answer 2

函数initialize()在头部声明，但是你在ready事件上调用它，并且在页面加载之后（解析所有内容并按顺序执行脚本）。所以在body中调用的代码将首先运行。

如果你想直接在头部执行initialize()，只需将其直接放在头部。

在你的情况下，这可能会导致问题，因为你正在访问正文中定义的元素。所以你应该使用onReady作为一切的起点。首先执行初始化，然后初始化/执行正文的脚本。

多个javascript块不按顺序执行

2 个答案: