Javascript 如何使用热毛巾绑定谷歌地图？

我试图用热毛巾展示一张简单的地图

在home.html页面中，我有：

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

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

如何将模型与视图绑定以显示地图？

编辑** 以下答案适用于Durandal 1.2。在durandal 2.0中，

viewsattached

事件被重命名为

attached

。您可以阅读有关它的Durandals文档

---

Durandal有一个viewAttached事件，一旦视图被数据绑定并附加到dom，该事件将在viewmodel上调用。这将是一个调用GoogleMapsAPI的好地方

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

再次编辑以解决用户的评论** 根据jamiehammond的评论，将DOM横向扩展到所连接的视图是一种更好的做法。如果DOM元素是视图的一部分

因此，在您的

视图附件

（在durandal 1.2中）或

附件

（在durandal 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);
   }
}

我根本没有搞砸Durandal 2.0，因为我一直忙于工作和其他事情，当我搞砸Durandal 1.0时，只是为了好玩，但我确实喜欢这个框架，希望有一天能玩上2.0。尽管如此，在Durandal 1.0中附加的视图中生成地图确实存在问题。但是，我没有使用谷歌地图。我用的是传单。我的解决方案是在附加的视图中创建一个延迟，该延迟会在短时间延迟后重新绘制地图。这是因为Durandal在视图中的转换与传单在dom元素中绘制地图的能力不匹配，因为它正在飞行并逐渐消失

因此，在所附的视图中，我会这样绘制地图：

window.setTimeout(drawMap, 10);

同样，这是我遇到的一个非常具体的问题，与杜兰达尔无关。当DOM元素仍在中转换时，这是一个更大的问题，因为它没有正确地呈现贴图。

Evan

我也试着让它工作，但没有乐趣。 我的html as和viewmodel与您的完全相同，我知道正在调用viewAttached组合，因为我得到了我的logger事件，但没有映射

我唯一能想到的另一件事是你把谷歌地图从哪里叫来？我在我的index.html中做同样的事情吗

向布雷特致意

对我来说，问题是高度是0px。我的工作模块如下所示：

定义（['plugins/router'，'knockout'，'plugins/utility']，函数（router，ko，utility）{ var 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'，'knockout'，函数（$，ko）{

}))

---

希望这对您有所帮助。

首先转到main.js并添加'async'：'../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'] } }
});

请注意，我们需要在scripts文件夹中添加async.js，因此请下载该文件并将其保存在hottowerscript文件夹中，作为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) {

我希望这将有助于：

---

在Durandal 2.0中，“viewAttached”被重命名为“attached”。此外，即使在修复了明显的语法错误（如在初始化后添加逗号）之后，上述代码也无法正常工作。和其他人一样，我仍然在寻找一个与新的谷歌API一起工作的解决方案。你应该始终关注视图。e、 g$（视图）.find（“#地图画布”）您是否正在使用类似于.NET 0.30.0的google地图Web服务API包装器加载google？或者您是如何开始使用google地图的？我认为nuget包是用于.NET库的。我指的是google maps javascript库。能否添加logger.log（document.getElementById（'map-canvas'））并查看是否能够从viewattached事件中获取对dom元素的引用？对于我来说，一切都运行正常，并将内容放入map canvas div中，但之后什么都不会发生。我不明白为什么使用attached而不是compositionComplete？在其他包含之前或之后包含google API脚本文件有关系吗？请查看我刚刚发布的答案。它可能对您有用。浏览器将按照引用脚本的顺序异步下载脚本，下载后将按照相同的顺序执行。因此，这取决于您何时调用谷歌地图api。。我会确保在那之前加载google脚本。谢谢-在浏览器开发工具中检查了解析的html后，我意识到它也将我的包含div设置为0px的高度！唷，这简直快把我逼疯了！

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