1

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

问题是body标签首先执行，并且由于没有为“map”变量分配谷歌地图任何对象，因此不会添加标记。

这是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();
});

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

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

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

于 2012-06-20T20:46:31.960 回答
1

该函数initialize()是在头部声明的，但是您在准备好事件时调用它，那是在页面加载之后（所有内容都已解析并按顺序执行脚本）。所以body中调用的代码会先运行。

如果你想initialize()直接在 head 中执行，直接放在 head 中即可。

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

于 2012-06-20T20:46:10.723 回答