機能をクリックイベントにリンクする

Question

私は特定の場所ボタンをクリックすると、マーカー情報ウィンドウがポップアップするので、機能をコーディングしようとしています。 Iveはマーカーの特定のタイトルと位置をログに記録するコードを持っていますが、viewmodelでinfowindowを呼び出そうとすると定義されません。

function viewModel() { 
     this.marker = locationArray().location; 
     this.openWindow = function(location){ 
     if(this.marker){ 
     console.log(this.marker); 

     }; 
    } 
} 

と：私は、情報ウィンドウがGoogleマップのinit関数であることを、私は

、ここでは、ビューモデルのための私のコードでのviewmodelからそれを開く方法を見つけ出すように見えるカントを知っています私のクリックイベント：

google.maps.event.addListener(marker,'click', (function(marker){ 
      return function() { 
      viewModel() 
      infoWindow.setContent("<div>" + marker.title + "</div>"); 
     infoWindow.open(map, marker); 
     } 
     })(marker)); 

ここでは、うまくいけば、これは役立ちます、私のGoogleマップのAPIです：

  function initMap() { 


     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 41.764117, lng: -72.676470}, 
      zoom: 13, 
      styles: style 
     }); 

// Iterates through the locationArray and gives the marker a proper 
// location. 
      for(var i = 0; i < locationArray().length; i++){ 
       var locations = locationArray()[i].location; 
       var title = locationArray()[i].title; 

       var marker = new google.maps.Marker({ 
        position: locations, 
        map: map, 
        title: title, 
        animation: google.maps.Animation.DROP 
       }); 

      locationArray()[i].marker = marker; 

      var message = "hello world!"; 

      var infoWindow = new google.maps.InfoWindow({ 
       content: title, 
       position: locations 
      }); 


     google.maps.event.addListener(marker,'click', (function(marker){ 
      return function() { 
      viewModel(); 
      infoWindow.setContent("<div>" + marker.title + "</div>"); 
      infoWindow.open(map, marker); 
     } 
    })(marker)); 


      }; 

      }; 
     ko.applyBindings(new viewModel()); 

Answer 1

ViewModelのの定義はあいまいです。一般的には、ViewModelの中に観測値を定義する必要があります。

function ViewModel(data) { 
    var self = this; 
    self.locations = ko.observableArray(data.locations || []); 
    self.showMarker(function(loc) {   // bind this to click (in html) 
     loc.marker.showInfo();  // I'm not sure if loc.marker.click() would work 
    }); 
} 
var locations = [];  // your list of locations 
ko.applyBindings(new ViewModel({locations: locations})); 

そして、あなたは簡単な方法であなたのマーカーのクリックイベントをバインドすることができ、それはまた、簡単に

marker.showInfo = function() { 
    infoWindow.setContent("<div>" + this.title + "</div>"); 
    infoWindow.open(map, this); 
}; 
google.maps.event.addListener(marker,'click', marker.showInfo);