Google मानचित्र और knockoutjs

Question

मैं एक पृष्ठ ऐप बना रहा हूं जहां दूसरे दृश्य में मुझे 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 मुझे एक समस्या दे रहा है। दृश्य में आईडी के साथ एक div शामिल है "mapId", लेकिन मैं आईडी प्राप्त करने में सक्षम नहीं हूं और इसलिए नक्शा प्रदर्शित नहीं किया जा सकता है। मैंने एचटीएमएल बाइंडिंग की कोशिश की, विशेषता बाध्यकारी लेकिन यह काम नहीं करता है। मैं नॉकआउट के लिए नया हूँ। कृपया कुछ विधि

Answer 1

यहां नॉकआउट जेएस और Google मानचित्र का उपयोग करने का एक अच्छा उदाहरण है। उम्मीद है कि यह आपको सही रास्ते पर लाने में मदद करेगा। http://www.codeproject.com/Articles/387626/BikeInCity-2-KnockoutJS-JQuery-Google-Maps

Answer 2

के बजाय mapId आप document.getElementById('map'), जहां 'map' का उपयोग करना चाहेंगे नक्शा (<div id="map"></div>) युक्त div की आईडी है। This jsFiddle मदद चाहिए।

Answer 3

आप एक कस्टम इतनी तरह बाध्यकारी उपयोग करना चाहिए:

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 है जो आप पूछ रहे हैं उससे थोड़ा अधिक करता है लेकिन आपके मामले के लिए भी ठीक काम करना चाहिए।

Answer 4

मैंने "schmidlop" बाध्यकारी को इनपुट में परिवर्तन (लेट लम्बा इनपुट) और मार्कर के केंद्र में हमेशा मार्कर रीसेट करने के लिए बाध्यकारी में संशोधन किया है।

एचटीएमएल

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