Google지도 마커 애니메이션, KnockoutJs 포함

Question

현재 Google지도 API 및 KnockoutJS를 사용하여지도 프로젝트를 진행 중입니다. 필자는 대부분의 프레임 워크를 정상적으로 처리 할 수 ​​있었지만 마지막 기능은 절 피하고 있습니다.

왼쪽 네비게이션 바에서 미리로드 된 위치 중 하나를 클릭하면 실제 마커를 클릭하는 것처럼 Google지도 마커 애니메이션이 트리거됩니다. 목록을 필터링합니다.

여기에 지금까지 내 코드입니다 :

// Define all variables to satisfy strict mode. 
var document; 
var setTimeout; 
var alert; 
var ko; 
var google; 

// Parsing for dynamic background & quote. 
function parseQuote(response) { 
    "use strict"; 
    document.getElementById("quote").innerHTML = response.quoteText; 
    document.getElementById("author").innerHTML = "Author - <b>" + response.quoteAuthor + "</b>"; 
} 

// Specify all locations on map. 
function model() { 
    "use strict"; 
    var locations = [{ 
     title: "The Hub", 
     lat: 39.521975, 
     lng: -119.822078, 
     id: "The Hub" 
    }, { 
     title: "The Jungle", 
     lat: 39.524982, 
     lng: -119.815983, 
     id: "The Jungle" 
    }, { 
     title: "Bibo Coffee Company", 
     lat: 39.536966, 
     lng: -119.811042, 
     id: "Bibo Coffee Company" 
    }, { 
     title: "Purple Bean", 
     lat: 39.531135, 
     lng: -119.833802, 
     id: "Purple Bean" 
    }, { 
     title: "Sips Coffee and Tea", 
     lat: 39.530438, 
     lng: -119.814742, 
     id: "Sips Coffee and Tea" 
    }]; 
    return locations; 
} 

var listLocations = ko.observableArray(model()); 

// Initalize map location & position. 
function initMap() { 
    "use strict"; 
    var map = new google.maps.Map(document.getElementById("map"), { 
     center: { 
      lat: 39.529633, 
      lng: -119.813803 
     }, 
     zoom: 14 
    }); 

// Define markers & content. 
    listLocations().forEach(function (data) { 

     var positionMk = new google.maps.LatLng(data.lat, data.lng); 
     var marker = new google.maps.Marker({ 
      position: positionMk, 
      map: map, 
      title: data.title, 
      animation: google.maps.Animation.DROP 
     }); 

     var infowindow = new google.maps.InfoWindow({ 
      content: data.title 
     }); 

     data.mapMarker = marker; 

     marker.addListener("click", function() { 
      data.triggerMarker(marker); 
      listLocations().forEach(function (place) { 
       if (data.title === place.title) { 
        place.openInfoWindow(); 
       } else { 
        place.closeInfoWindow(); 
       } 
      }); 
     }); 

     map.addListener("click", function() { 
      listLocations().forEach(function (place) { 
       place.closeInfoWindow(); 
      }); 
     }); 

     var setMk = function (marker) { 
      infowindow.open(map, marker); 
      marker.setAnimation(google.maps.Animation.BOUNCE); 
      setTimeout(function() { 
       marker.setAnimation(null); 
      }, 750); 
     }; 
     data.triggerMarker = setMk.bind(); 

     var openMk = function() { 
      infowindow.open(map, marker); 
     }; 
     data.openInfoWindow = openMk.bind(); 

     var closeMk = function() { 
      infowindow.close(map, marker); 
     }; 
     data.closeInfoWindow = closeMk.bind(); 

    }); 

} 

// Define ViewModel for list and sorting of list. 

function ViewModel() { 
    "use strict"; 
    var self = {}; 

    self.placeList = ko.observableArray([]); 

    listLocations().forEach(function (place) { 
     place.visible = ko.observable(true); 
     self.placeList.push(place); 
    }); 

    self.filterValue = ko.observable(""); 

    self.filterList = ko.computed(function() { 
     listLocations().forEach(function (place) { 
      var searchParam = self.filterValue().toLowerCase(); 
      var toBeSearched = place.title.toLowerCase(); 

      place.visible(toBeSearched.indexOf(searchParam) > -1); 

      if (place.mapMarker) { 
       place.mapMarker.setVisible(toBeSearched.indexOf(searchParam) > -1); 
      } 

      if (place.visible() && searchParam && place.mapMarker) { 
       place.triggerMarker(place.mapMarker); 
      } else if (place.mapMarker) { 
       place.closeInfoWindow(); 
      } 
     }); 
    }); 

// Responsiveness for clicking locations on the list. 
    self.onClickListener = function (data) { 
     listLocations().forEach(function (place) { 
      if (data.title === place.title) { 
       place.openInfoWindow(); 
      } else { 
       place.closeInfoWindow(); 
      } 
     }); 
    }; 

    return self; 
} 

ko.applyBindings(new ViewModel()); 

// Error handling for API's. 
function forismaticError() { 
    "use strict"; 
    alert("Forismatic API is unreachable, please check your internet connection and try again."); 
} 

function googleMapsError() { 
    "use strict"; 
    alert("Google Maps API is unreachable, please check your internet connection and try again."); 
} 

이이 평가 될 것으로 제공 될 수있는 모든 통찰력! 나는 그것이 명백한 것처럼 느낀다. 그러나 나의 피곤한 두뇌는 나에게 실패하고있다.

In addition, here's a quick JSFiddle of the entire project as well.

Answer 1

당신은 당신의 self.onClickListener 기능에 애니메이션을 트리거 코드 줄을 복사하는 데 필요한 :

self.onClickListener = function (data) { 
        listLocations().forEach(function (place) { 
         if (data.title === place.title) { 
          place.openInfoWindow(); 
          place.triggerMarker(place.mapMarker); 
         } else { 
          place.closeInfoWindow(); 
         } 
        }); 
       };