как я могу использовать API Google Планета Земля с backbone.js + jquery Mobile?

Как я могу использовать API Google Планета Земля с backbone.js + jquery Mobile?

Я создал приложение, используя backbone.js, underscore.js и jQuery Mobile. Для API Google Планета Земля я использую образец кода, указанный на странице https://developers.google.com/earth/documentation/#using_the_google_earth_api

Рендеринг моего шаблона и все остальные страницы работают нормально. Но когда я загружаю API Google Earth в один тег, он не загружается, и в консоли js я получаю сообщение: «ERR_INVALID_DIV».

Модуль Google.earth никогда не вызывает initCallback, он всегда вызывает failureCallback при вызове google.earth.createInstance.

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

мой код js, как показано ниже,

myjs1.js

var ge;
function init() {
  google.earth.createInstance('map3d', initCB, failureCB);
}

function initCB(instance) {
  console.log(' init call back call ');
  ge = instance;
  ge.getWindow().setVisibility(true);
}

function failureCB(errorCode) {
    console.log(errorCode);
}

Теперь мой код Backbone, как показано ниже,

myjs2.js

WebApp.MyPage= Backbone.View.extend({

initialize:function (result) {
    this.template =_.template($('#myPage').html());
},

render:function (eventName) {
    var self = this;
    mydata = object dict of my data;
    $(self.el).html(self.template({mydata:mydata}));

    google.load("earth", "1");

    init();
    google.setOnLoadCallback(init);

}

Теперь мой HTML-код, как показано ниже,

<script type="text/template" id="myPage">
    <div data-role="page">
        <div data-role="content">
            <div id="map3d" style="height: 400px; width: 600px;"></div>
        </div>
    </div>
</script>

myhtml.html

Есть ли способ исправить это?

Любая помощь приветствуется.


person Jiten Rangwala    schedule 03.06.2013    source источник
comment
Вы должны хотя бы предоставить некоторый код, чтобы дать контекст вашему вопросу, иначе наши подсказки даже меньше, чем ваши ...   -  person namero999    schedule 03.06.2013


Ответы (1)


API Земли работает с подключаемым модулем Google Планета Земля, который доступен только в Windows и Mac OSX. . К сожалению, он недоступен на мобильных устройствах!

Если вы тестируете свою систему Mac или Windows, вы сможете заставить ее работать. Код ошибки ERR_INVALID_DIV звучит так, будто не находит map3d div. Я бы поместил оператор debugger; в код непосредственно перед вызовом google.earth.createInstance(), а затем посмотрел бы в инспекторе DOM и посмотрел, есть ли map3d в DOM. Он должен поступать из вашего шаблона, если эта часть работает.

Но это не поможет вам, когда вы попытаетесь загрузить свой сайт на мобильное устройство, потому что у вас там не будет плагина Google Планета Земля.

person Michael Geary    schedule 06.06.2013
comment
Я тестирую свою систему Windows с установленным плагином Earth, но он не работает :( - person Jiten Rangwala; 06.06.2013
comment
Хорошо, это, безусловно, должно быть возможно заставить его работать в вашей системе Windows. Но какова конечная цель - использовать его на мобильном сайте? Это не сработает. - person Michael Geary; 06.06.2013
comment
Когда я пробую это на одной статической странице html без основы, подчеркивания и jQM, он отлично работает, но не в динамическом приложении, которое создается с помощью магистрали, подчеркивания и jQM. Итак, для моего динамического приложения у меня есть только такая возможность, как Google Map, но я люблю Google Earth. - person Jiten Rangwala; 06.06.2013
comment
Вы определенно можете заставить API Земли работать в вашей системе Windows с помощью Backbone и тому подобного. Но в любом случае это не будет работать на вашем мобильном устройстве! Из того факта, что вы используете jQuery Mobile, я предполагаю, что вы ориентируетесь на мобильные устройства, не так ли? Попробуйте загрузить пример Hello, Earth! в вашем мобильном браузере. - person Michael Geary; 06.06.2013