Question

我正在使用google maps API并复制了这些示例，并最终得到了一个名为“initialize”的函数，该函数是从正文onload调用的。

我在几个不同的用户控件中使用这些地图，这些控件放在内容占位符中，因此正文标记位于母版页中。

有没有办法直接在usercontrol中调用initialize而不必在masterpage上放置onload？理想情况下，我希望我的用户控件是一个独立的控件，我可以插入页面而不尝试访问母版主体onload。

我尝试从用户控件的页面加载中调用Initialize函数（通过添加启动脚本），但地图不会出现。

有什么建议吗？

我的代码：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">/script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var map;
var geocoder;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(51.8052184317649, -4.965819906250006);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    $.ajax({
        type: "POST",
        url: "/GoogleMapsService.asmx/GetPointers",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        beforeSend: function () {
            $(".loadingData").html("<p>Loading data..</p>");
        },
        complete: function () {
            $(".loadingData").html("");
        },
        cache: true,
        success: mapPoints,
        error: onError
    });
}
function onError(xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(xhr.responseText);
}
function mapPoints(response) {

    if (response.d != null) {
        if (response.d.length > 0) {
            for (var i = 0; i < response.d.length; i++) {

                plotOnMap(response.d[i].Id, response.d[i].Name,
                    response.d[i].Lat, response.d[i].Long,
                    response.d[i].ShortDesc)

            }
        }

    }
}

并在我的测试母版页上：

<body onload="initialize()">
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>

Answer 1

感谢您的回答，但我终于这样做了：

<script type="text/javascript">
    window.onload = function () {
        initialize();
    }
</script>

Answer 2

我就是这样做的:(你可以在usercontrol中使用这个脚本）

<script type="text/javascript">

          $(document).ready(function() {
            if ($('#map_canvas').length != 0) {
            //google map stuff here
          }
      });
    </script>

Google Maps API 3如何调用initialize而不将其放在Body onload中

2 个答案: