8

我正在制作一个单页应用程序，在第二个视图中我需要显示谷歌地图。我正在使用要创建地图对象的 Google 地图 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 绑定、属性绑定，但它不起作用。我是淘汰赛的新手。请提出一些方法

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 Maps 的一个很好的例子。希望它将帮助您走上正确的道路。 http://www.codeproject.com/Articles/387626/BikeInCity-2-KnockoutJS-JQuery-Google-Maps

于 2012-11-28T17:36:42.317 回答
1

我已修改“schmidlop”绑定以在输入更改（经纬度输入）和标记始终位于地图中心时重置标记。

html

<input data-bind="value: mapOne().lat" />

<input data-bind="value: mapOne().lng" />

绑定，将其包含在一些 js 文件中，并将其包含在 html 中。

ko.bindingHandlers.map = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            $("#" + element.getAttribute("id")).data("mapObj","");
            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: 12, 
                              mapTypeId: google.maps.MapTypeId.ROADMAP};

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

            mapObj.marker = new google.maps.Marker({
                map: mapObj.googleMap,
                position: latLng,
               draggable: true
            });     

            mapObj.onChangedCoord = function(newValue) {
                var latLng = new google.maps.LatLng(
                    ko.utils.unwrapObservable(mapObj.lat),
                    ko.utils.unwrapObservable(mapObj.lng));

                mapObj.googleMap.setCenter(latLng);
                mapObj.marker.setPosition(latLng);                 
            };

            mapObj.onMarkerMoved = function(dragEnd) {
                var latLng = mapObj.marker.getPosition();
                mapObj.lat(latLng.lat());
                mapObj.lng(latLng.lng());
            };

            mapObj.lat.subscribe(mapObj.onChangedCoord);
            mapObj.lng.subscribe(mapObj.onChangedCoord);  

            google.maps.event.addListener(mapObj.marker, 'dragend', mapObj.onMarkerMoved);

            $("#" + element.getAttribute("id")).data("mapObj",mapObj);
        }
    };

查看模型

self.mapOne = ko.observable();    


self.mapOne({'lat':ko.observable(87.22),'lng':ko.observable(27.22)});
于 2017-04-21T11:11:12.483 回答
0

而不是mapId你想要使用的，包含地图的 div 的 id ( )document.getElementById('map')在哪里。这个 jsFiddle应该会有所帮助。'map'<div id="map"></div>

于 2012-12-21T01:47:02.637 回答