8

2番目のビューでGoogleマップを表示する必要があるシングルページアプリを作成しています。マップオブジェクトを作成するGoogleマップAPIを使用しています。

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

パラメータmapIdが問題を引き起こしています。ビューに「mapId」というIDのdivが含まれていますが、IDを取得できないため、マップを表示できません。HTMLバインディング、属性バインディングを試しましたが、機能しません。ノックアウトは初めてです。いくつかの方法を提案してください

4

4 に答える 4

20

次のようなカスタム バインディングを使用する必要があります。

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

これは、あなたが求めている以上のことをするフィドルですが、あなたのケースでもうまくいくはずです。

于 2013-04-30T17:48:25.470 に答える
1

Knockout JS と Google マップを使用した良い例を次に示します。うまくいけば、それはあなたを正しい軌道に乗せるのに役立ちます. http://www.codeproject.com/Articles/387626/BikeInCity-2-KnockoutJS-JQuery-Google-Maps

于 2012-11-28T17:36:42.317 に答える