Google maps and knockoutjs

Question

Tôi đang tạo một ứng dụng trang duy nhất ở chế độ xem thứ hai mà tôi cần để hiển thị bản đồ Google. Tôi đang sử dụng API bản đồ của Google, nơi đối tượng bản đồ sẽ được tạo.

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

Thông số mapId đang gây ra sự cố. Khung nhìn chứa một div có id nói "mapId", nhưng tôi không thể nhận được id và vì vậy bản đồ không thể được hiển thị. Tôi đã thử ràng buộc HTML, ràng buộc thuộc tính nhưng nó không hoạt động. Tôi mới để loại trực tiếp. Vui lòng đề xuất một số phương pháp

Answer 1

Đây là ví dụ điển hình về cách sử dụng Knockout JS và Google Maps. Hy vọng rằng, nó sẽ giúp bạn đi đúng hướng. http://www.codeproject.com/Articles/387626/BikeInCity-2-KnockoutJS-JQuery-Google-Maps

Answer 2

Thay vì mapId bạn sẽ muốn sử dụng document.getElementById('map'), nơi 'map' là id của div chứa bản đồ (<div id="map"></div>). This jsFiddle sẽ giúp ích.

Answer 3

Bạn nên sử dụng ràng buộc như vậy một tùy chỉnh:

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 của bạn sẽ trông như thế này:

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

Cuối cùng mô hình xem của bạn:

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

Đây là một fiddle điều đó có nhiều hơn một chút so với những gì bạn đang yêu cầu nhưng cũng nên làm việc tốt cho trường hợp của bạn.

Answer 4

Tôi đã sửa đổi liên kết "schmidlop" để đặt lại điểm đánh dấu về thay đổi đầu vào (đầu vào dài lat) và điểm đánh dấu luôn ở giữa bản đồ.

Html

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

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

Binding, Bao gồm này trong một số tập tin js và bao gồm nó trong 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); 
     } 
    }; 

Xem Mẫu

self.mapOne = ko.observable();  


self.mapOne({'lat':ko.observable(87.22),'lng':ko.observable(27.22)});