google-maps - 谷歌地图和knockoutjs

Question

我正在制作一个单页应用程序，在第二个 View 中我需要显示谷歌地图。我正在使用要创建 map 对象的 Google map API。

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

参数 mapId给我一个问题。该 View 包含一个 id 为“mapId”的 div，但我无法获取 id，因此无法显示 map 。我尝试了 HTML 绑定(bind)、属性绑定(bind)，但它不起作用。我是 knockout 的新手。请提出一些方法

Answer 1

您应该像这样使用自定义绑定(bind):

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>

最后你的 View 模型:

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

这是 fiddle这比您要求的要多一点，但也应该适用于您的情况。