Как связать карты Google с помощью HotTowel?

Question

Я пытаюсь показать простую карту в HotTowel.

В home.html странице у меня есть что:

<section> 
    <div id="map-canvas" data-bind="map: map"></div> 
</section> 

В home.js у меня есть что:

define(['services/logger'], function (logger) { 
    var vm = { 
    activate: activate, 
    title: 'Home View', 
    map: map 
}; 

    return vm; 

    function activate() { 
    google.maps.event.addDomListener(window, 'load', initialize); 
    logger.log('Home View Activated', null, 'home', true); 
    return true; 
    } 

    var map; 
    function initialize() { 
    var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(-34.397, 150.644), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    } 
}); 

Как связать модель с целью показать карту?

Answer 1

EDIT **

Ниже представлен ответ для Durandal 1.2. В durandal 2.0 событие viewAttached было , переименованное в - attached. Вы можете прочитать документацию Durandals о нем here.

---

Durandal имеет viewAttached события, которое вызывается на вашем ViewModel когда представление было привязкой данных и прикрепляется к йотам. Это было бы хорошим местом для вызова карт google.

define(['services/logger'], function (logger) { 
    var vm = { 
    viewAttached: initialize 
    title: 'Home View', 
    map: map 
}; 

    return vm; 

    var map; 
    function initialize(view) { 
    logger.log('Home View Activated', null, 'home', true); 
    var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(-34.397, 150.644), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    } 
}); 

EDIT СНОВА для решения народов комментарии **

Согласно комментарий Джейми Хаммонда это лучшая практика для сферы вашей DOM трансверсально зрения, который прикреплен. Если элемент DOM находится отдельно от представления.

Таким образом, внутри вашей viewAttached (в Дюрандала 1.2) или attached (в Дюрандаль 2.0) вы бы:

var map; 
var mapOptions = { /*map options*/ }; 
var vm = { 
    attached: function (view) { 
     var mapCanvas = $('#map-canvas', view).get(0); 
     map = new google.maps.Map(mapCanvas, mapOptions); 
    } 
} 

Я не запутались с Дюрандала 2.0 вообще, потому что я был очень занят работой и все, и когда я возился с Durandal 1.0, это было просто для удовольствия, но я действительно люблю рамки и надеюсь, что в один прекрасный день вы сможете играть с 2.0. С учетом сказанного у меня возникла проблема с созданием карты в viewattached в Durandal 1.0. Но я не использовал карты Google. Я использовал Leafletjs. Мое решение проблемы заключалось в создании задержки в представленииAttached, который бы перерисовал карту после небольшой задержки. Это произошло потому, что Переход Дюрандальте в представлении не работает хорошо с листочками способностью рисовать карту в элементе йота, как он летит и выцветание в

Так, внутри viewAttached я бы нарисовать карту так:.

window.setTimeout(drawMap, 10); 

Опять же, это была очень специфическая проблема, с которой я столкнулся, и не проблема с Дюрандалом. Это было больше проблем с Leafletjs не делает карту правильно, когда элемент DOM еще в переходе щих.

Answer 2

Эваны,

Я также пытаюсь получить эту работу, но не радости. У меня есть html as и viewmodel точно так же, как и у вас, и я знаю, что композиция viewAttached вызывается, потому что я получаю событие logger - но нет карты!

Единственная вещь, о которой я могу думать, это то, где вы называете ваши googlemaps? Я делаю в моем index.html, вы делаете то же самое?

С уважением

Answer 3

BrettH,

Для меня проблема в том, что высота была 0px. Мой модуль, который работает выглядит следующим образом:

определяет ([ 'плагин/маршрутизатор', 'нокаут', 'плагины/утилиты'], функцию (маршрутизатор, ко, утилита) { вар Vm = {}; В.М. .map = undefined;

vm.compositionComplete = function() { 

    var myLatlng = new google.maps.LatLng(29.4000, 69.1833); 
    var mapOptions = { 
     zoom: 6, 
     center: myLatlng 
    } 

    vm.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var georssLayer = new google.maps.KmlLayer({ 
     url: 'http://www.visualtravelguide.com/Pakistan-Islamabad.kmz' 
    }); 
    georssLayer.setMap(vm.map); 

    utility.resizeElementHeight(document.getElementById('map-canvas'), 10); 
    $(window).resize(function() { 
     utility.resizeElementHeight(document.getElementById('map-canvas'), 10); 
    }); 

}; 

return vm; 

});

Моя утилита модуль выглядит следующим образом:

определяют ([ 'JQuery', 'Нокаут'], функция ($ К.О.) {

return { 

    //resizes an element so height goes to bottom of screen, got this from a stack overflow 
    //usage: 
    // resizeElementHeight(document.getElementById('projectSelectDiv')); 
    //$(window).resize(function() { 
    //  resizeElementHeight(document.getElementById('projectSelectDiv')); 
    //}); 
    //adjustpixels is an optional parameter if you want to leave room at the bottom 
    resizeElementHeight: function (element,adjustPixels) { 
     var height = 0; 
     var adjust = 0; 
     if (adjustPixels != undefined) 
      adjust = adjustPixels; 
     var body = window.document.body; 
     if (window.innerHeight) { 
      height = window.innerHeight; 
     } else if (body.parentElement.clientHeight) { 
      height = body.parentElement.clientHeight; 
     } else if (body && body.clientHeight) { 
      height = body.clientHeight; 
     } 
     element.style.height = ((height - element.offsetTop-adjust) + "px"); 
    }, 
    //looks up name by id, returns blank string if not found 
    //pass in a list and an id (they can be observables) 
    LookupNameById: function (l, wId) { 
      var list = ko.utils.unwrapObservable(l); 
      var id = ko.utils.unwrapObservable(wId); 
      var name = ''; 
      $.each(list, function (key, value) { 

       if (value.Id() == id) 
        name = value.Name(); 
      }); 

      return name; 
    }, 
    //sets the widths of the columns of headertable to those of basetable 
    setHeaderTableWidth: function (headertableid,basetableid) { 
     $("#"+headertableid).width($("#"+basetableid).width()); 
     $("#"+headertableid+" tr th").each(function (i) { 
      $(this).width($($("#"+basetableid+" tr:first td")[i]).width()); 
     }); 
     $("#" + headertableid + " tr td").each(function (i) { 
      $(this).width($($("#" + basetableid + " tr:first td")[i]).width()); 
     }); 
    } 

}; 

});

Надеюсь, это вам поможет.

Answer 4

первый идти своим main.js и добавить «асинхр»: «../Scripts/async»,

require.config({ 
    paths: { 
     'text': '../Scripts/text', 
     'durandal': '../Scripts/durandal', 
     'plugins': '../Scripts/durandal/plugins', 
     'mapping': '../Scripts/knockout.mapping-latest', 
     'async': '../Scripts/async', 
     'transitions': '../Scripts/durandal/transitions' 
    }, 
    shim: { mapping: { deps: ['knockout'] } } 
}); 

уведомление, что нам нужно добавить async.js в сценарии папку так идти чтобы Download async.js загрузить файл и сохранить его в папке hottowel сценария, как async.js

в main.js добавить

// convert Google Maps into an AMD module 
define('gmaps', ['async!http://maps.google.com/maps/api/js?v=3&sensor=false'], 
function(){ 
    // return the gmaps namespace for brevity 
    return window.google.maps; 
}); 

в любой ViewModel теперь вы можете использовать его как этот

define(['plugins/router', 'knockout', 'services/logger', 'durandal/app', 'gmaps'], function (router, ko, logger, app, gmaps) { 

я надеюсь, что это поможет: