谷歌地图和knockoutjs

Question

我正在创建单页应用,在第二个视图中我需要显示Google地图.我正在使用Google maps API来创建地图对象.

 var map = new google.maps.Map(mapId, {
        zoom: 5,
        center: new google.maps.LatLng(55, 11),
        mapTypeId: google.maps.MapTypeId.ROADMAP
 });

该参数mapId给我一个问题.视图包含一个id为"mapId"的div,但我无法获取id,因此无法显示地图.我尝试过HTML绑定,属性绑定但它不起作用.我是淘汰赛的新手.请提出一些方法

Answer 1

你应该使用这样的自定义绑定:

ko.bindingHandlers.map = {

    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var mapObj = ko.utils.unwrapObservable(valueAccessor());
        var latLng = new google.maps.LatLng(
            ko.utils.unwrapObservable(mapObj.lat),
            ko.utils.unwrapObservable(mapObj.lng));
        var mapOptions = { center: latLng,
                          zoom: 5, 
                          mapTypeId: google.maps.MapTypeId.ROADMAP};

        mapObj.googleMap = new google.maps.Map(element, mapOptions);
    }
};

你的HTML看起来像这样:

<div id="mapDiv" data-bind="style:{width:'300px',height:'300px'},map:myMap"></div>

最后你的视图模型:

function MyViewModel() {
    var self = this;
    self.myMap = ko.observable({
        lat: ko.observable(55),
        lng: ko.observable(11)});
}

这是一个比你要求的更多的小提琴,但也适用于你的情况.

Answer 2

这是使用 Knockout JS 和 Google 地图的一个很好的示例。希望它能帮助您走上正轨。 http://www.codeproject.com/Articles/387626/BikeInCity-2-KnockoutJS-JQuery-Google-Maps