谷歌地圖和knockoutjs

我正在製作一個單頁的應用程序，在第二個視圖中，我需要顯示谷歌地圖。我正在使用要創建地圖對象的Google地圖API。谷歌地圖和knockoutjs

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綁定，屬性綁定，但它不起作用。我是新來的淘汰賽。請建議一些方法

來源

2012-10-04 Empty

你能更具體的關於爲什麼你不能獲得元素的id？第二個視圖是模式/對話框嗎？ –

第二個視圖是一個模式。和PS-我正在使用knockout.js。爲了訪問id，我使用了jquery語法$（'＃mapId'）[0]語法，它返回null或undefined。當我使用id的atrribute綁定時，該值被分配給id，但它不代表div元素（這是map對象所需的），而只是一個等於id值的字符串。 – Empty

你可以在jsfiddle或你的問題上發佈一些代碼嗎？我在想，如果你在初始化谷歌地圖對象之前*敲除有機會將ID綁定到你的元素。 –

下面是使用Knockout JS和Google Maps的一個很好的例子。希望它能幫助你走上正軌。 http://www.codeproject.com/Articles/387626/BikeInCity-2-KnockoutJS-JQuery-Google-Maps

來源

2012-11-28 17:36:42 Aligned

相反的mapId你要使用document.getElementById('map')，其中'map'是包含地圖（<div id="map"></div>）的div ID。 This jsFiddle應該有所幫助。

來源

2012-12-21 01:47:02 Gady

你應該使用自定義像這樣綁定：

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

這裏是一個fiddle這比你問的要多一點，但應該適合你的情況。

來源

2013-04-30 17:48:25 schmidlop

那麼你如何在單個地圖中推送更多點？我試過observableArray，但它不工作，任何人都可以幫助我嗎？ –

@kougiland - 在綁定中，我在視圖模型的googleMap屬性（示例中爲'myMap'）中隱藏了對Google地圖對象的引用。您可以像self.myMap（）。googleMap那樣訪問它並直接添加標記。如果你想要一個保持地圖標記與可觀察數組同步的綁定，那麼你應該問一個不同的問題。 – schmidlop

我修改了「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-21 11:11:12

谷歌地圖和knockoutjs

回答

相關問題