如何使用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

编辑**

以下是杜兰达尔1.2的答案。在durandal2.0中，viewAttached事件被重命名为为attached。您可以阅读有关它的Durandals文档，这里。

Durandal有一个viewAttached事件，一旦视图被数据库化并附加到dom，就会在您的视图模型上调用它。这将是一个很好的地方，称为谷歌地图api。

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);
  }
});

再次编辑以回应人民的评论**

根据Jamie的评论，将DOM横越范围扩展到所附加的视图是一种更好的做法。如果DOM元素是视图的一部分。

因此，在您的viewAttached (以durandal1.2)或attached (在durandal2.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);
   }
}

我根本没有处理过Durandal2.0，因为我一直在忙着工作和其他事情，当我在使用Durandal1.0时，它只是为了好玩，但我确实喜欢这个框架，并且希望有一天能玩2.0。话虽如此，我在杜兰达尔1.0版的视图中生成地图时确实遇到了问题。但是，我没有使用谷歌地图。我用的是叶叶。我对这个问题的解决方案是在viewAttached中创建一个延迟，在短暂的延迟后重新绘制地图。这是因为杜兰达尔在视图中的转变并不能很好地利用传单在多姆元素中绘制地图的能力，因为地图正在飞来飞去。

因此，在viewAttached内部，我会像这样绘制地图：

window.setTimeout(drawMap, 10);

再说一次，这是我遇到的一个非常具体的问题，而不是杜兰达尔的问题。在DOM元素仍在转换时，Leafletjs没有正确地呈现映射，这更有问题。

Answer 2

埃文

我也想让这件事发挥作用，但joy不行。我和您一样拥有我的html as和know模型，而且我知道viewAttached组合正在被调用，因为我得到了我的记录器事件--但是没有地图！

我唯一能想到的另一件事就是你把你的googlemaps从哪里来？我在做我的index.html，你也这么做吗？

问候

Answer 3

BrettH，

对我来说，问题是身高是0 0px。我的模块看起来如下所示：

定义(“插件/路由器”、“敲除”、“插件/实用程序”、函数(路由器、ko、实用程序){ vm ={ }；vm.map =未定义；

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’，‘击倒’，函数($，ko) {

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());
        });
    }

};

})；

希望这能帮到你。