API Карт Google, интегрированный в ООП - PullRequest
Новая
       7

API Карт Google, интегрированный в ООП

1 голос
/ 13 октября 2011

Я пытаюсь реализовать API Карт Google в режиме ООП.

Сначала я создаю класс, а затем добавляю несколько методов.

Однако в методе Load () я получаю сообщение об ошибке в fireBug

"google.load не является функцией"

и я также получаю эту ошибку, если пытаюсь выполнить ее в конструкторе.

Есть идеи? Заранее спасибо.

Б.Р. Карл 

// Class Map
function Map() {
    var self = this;

    var script = document.createElement("script");
    //script.src = "http://www.google.com/jsapi?key=MyAPIKey=self.Load";
    script.src = "http://www.google.com/jsapi?key=MyAPIKey";
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);

    //google.load("maps", "2", {"callback" : self.Loaded}); //This does not work
}

Map.prototype.Load = function() {    
    //AJAX API is loaded successfully.
    google.load("maps", "2", {"callback" : self.Loaded()});
}

Map.prototype.Loaded = function() {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setMapType(G_SATELLITE_MAP);
    map.setCenter(new GLatLng(11.11, 22.22), 5);
}

map = new Map;
map.Load();

1 Ответ

1 голос
/ 17 октября 2011

В вашем коде есть несколько проблем. Ошибка, которую вы получаете, является причиной первой проблемы:

  1. Вы звоните google.load() (внутри map.Load()) до загрузки скрипта, содержащего Google Loader. Вы должны использовать функцию обратного вызова, чтобы получать уведомления при загрузке скрипта (см. Раздел динамической загрузки в документации Google Loader, особенно обратите внимание на параметр callback в значении script.src). Вы просто не можете использовать функцию google.load() до вызова обратного вызова.

  2. В функции google.load вы устанавливаете обратный вызов неправильно. Кажется, вы хотите, чтобы функция map.Loaded() была вызвана как обратный вызов. Но вы делаете что-то другое. Вы мгновенно вызываете map.Loaded() и передаете его возвращаемое значение в качестве имени функции обратного вызова. А поскольку map.Loaded() не возвращает никакого значения, вы не указали обратного вызова. Чтобы исправить это, удалите скобки - используйте self.Loaded вместо self.Loaded().

  3. Не следует использовать self при указании функции обратного вызова. Функция обратного вызова должна быть видна глобально. Когда вы используете self, вы ссылаетесь на глобальную область. Если вы определили глобальную функцию с именем Loaded, она вызывается вместо map.Loaded() function. Если вы не определили глобальную функцию с таким именем, вы получите сообщение об ошибке.

Для исправления проблем ваш код должен содержать что-то вроде этого (при условии, что переменная map видна глобально): 

// Class Map
function Map() {
    var self = this;
    var script = document.createElement("script");
    script.src = "http://www.google.com/jsapi?key=MyAPIKey&callback=map.Load";
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

Map.prototype.Load = function() {    
    //AJAX API is loaded successfully.
    google.load("maps", "2", {"callback" : map.Loaded});
}

Map.prototype.Loaded = function() {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setMapType(G_SATELLITE_MAP);
    map.setCenter(new GLatLng(11.11, 22.22), 5);
}

map = new Map();
...