Google Maps API 3 Как вызвать инициализацию, не помещая ее в Body onload - PullRequest
5 голосов
/ 22 декабря 2010

Я использую API карт Google, скопировал примеры и получил функцию "initialize", которая вызывается из тела загрузки.

Я использую карты в нескольких различных пользовательских элементах управления, которые размещаются в заполнителях содержимого, поэтому тег body находится на главной странице.

Есть ли способ вызова инициализации непосредственно в пользовательском контроле, вместо того, чтобы размещать загрузку на главной странице? В идеале я хочу, чтобы мой пользовательский элемент управления был отдельным элементом управления, который я мог бы просто вставить в страницы, не пытаясь получить доступ к телу главной страницы.

Я пытался вызвать функцию 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>

Ответы [ 2 ]

2 голосов
/ 23 декабря 2010

Спасибо за ответ, но я наконец сделал это так:

<script type="text/javascript">
    window.onload = function () {
        initialize();
    }
</script>
1 голос
/ 22 декабря 2010

Вот как я это делаю: (этот скрипт вы можете использовать в пользовательском контроле)

<script type="text/javascript">

          $(document).ready(function() {
            if ($('#map_canvas').length != 0) {
            //google map stuff here
          }
      });
    </script>  
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...