Knouckout js與谷歌地圖連接

我是新來的。我目前正在試圖創建一個項目，使地圖上的標記通過使用敲除來實現效果。Knouckout js與谷歌地圖連接

我已經創建了基於從陣列中的數據在其上的標記的圖。然後，通過使用ViewModel和knockoutjs，我創建一個可觀察數組，並在左側邊欄上列出來自該可觀察數組的標題的列表。現在我試圖將標題從左邊欄連接到標記，並在列表標題和標記標題相同時使它們反彈。我試圖做一個循環，因爲當我使用點擊與KO.js我找回它被點擊的對象。基本上我堅持在這裏：

this.setLoc = function(clickedLoc){ 
    for(var i = 0; i < self.locList.length; i++){ 
     if(clickedLoc.title == markers[i].title){ 
      markers[i].setAnimation(google.maps.Animation.BOUNCE); 

     } else { 
      console.log("hi"); 
     } 
    } 
};

我對這個項目的GitHub是https://github.com/Aimpotis/map_project

我是一個新的開發者，你可以幫助一個新的傢伙，請和請用簡單來說，因爲我沒有太多的經驗。

來源

2017-07-28 Morpheus

我認爲你需要拆開你的觀察對象。我拉下了你的代碼，並得到它的工作。這裏是改變的功能。

this.setLoc = function (clickedLoc) { 
     var unwrappedLoc = ko.toJS(clickedLoc); 
     var unwrappedLocList = ko.toJS(self.locList); 
     for (var i = 0; i < unwrappedLocList.length; i++) { 
      if (unwrappedLoc.title == markers[i].title) { 
       markers[i].setAnimation(google.maps.Animation.BOUNCE); 
      } 
     } 
    };

這裏是整個事情。的JavaScript（app2.js）

var map; 

var markers = []; 
var locations = [ 
      { title: 'White Tower', location: { lat: 40.626446, lng: 22.948426 } }, 
      { title: 'Museum of Photography', location: { lat: 40.632874, lng: 22.935479 } }, 
      { title: 'Teloglion Fine Arts Foundation', location: { lat: 40.632854, lng: 22.941567 } }, 
      { title: 'War Museum of Thessaloniki', location: { lat: 40.624308, lng: 22.95953 } }, 
      { title: 'Jewish Museum of Thessaloniki', location: { lat: 40.635132, lng: 22.939538 } } 
]; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: { lat: 40.6401, lng: 22.9444 }, 
     zoom: 14 
    }); 
    for (var i = 0; i < locations.length; i++) { 
     // Get the position from the location array. 
     var position = locations[i].location; 
     var title = locations[i].title; 
     // Create a marker per location, and put into markers array. 
     var marker = new google.maps.Marker({ 
      position: position, 
      title: title, 
      map: map, 
      animation: google.maps.Animation.DROP, 
      id: i 
     }); 
     markers.push(marker); 
    }; 

    var Loc = function (data) { 
     this.title = ko.observable(data.title); 
     this.location = ko.observable(data.location); 
    }; 

    var place = function (data) { 
     this.name = ko.observable(data.name); 
    }; 

    var stringStartsWith = function (string, startsWith) { 
     string = string || ""; 
     if (startsWith.length > string.length) 
      return false; 
     return string.substring(0, startsWith.length) === startsWith; 
    }; 

    var ViewModel = function() { 
     var self = this; 
     this.query = ko.observable(''); 
     this.locList = ko.observableArray(''); 
     this.filteredlocList = ko.computed(function() { 
      var filter = self.query().toLowerCase(); 
      console.log(filter); 
      var unwrappedLocList = ko.toJS(self.locList); 
      if (!filter) { 
       return unwrappedLocList 
      } else { 
       return ko.utils.arrayFilter(unwrappedLocList, function (item) { 
        return stringStartsWith(item.title.toLowerCase(), filter); 
       }); 
      } 
     }, this); 

      this.setLoc = function (clickedLoc) { 
       var unwrappedLoc = ko.toJS(clickedLoc); 
       var unwrappedLocList = ko.toJS(self.locList); 
       for (var i = 0; i < unwrappedLocList.length; i++) { 
        if (unwrappedLoc.title == markers[i].title) { 
         markers[i].setAnimation(google.maps.Animation.BOUNCE); 
        } 
       } 
      }; 

    }; 
    var vm = new ViewModel(); 
    ko.applyBindings(vm); 
    locations.forEach(function (locItem) { 
     vm.locList.push(new Loc(locItem)) 
    }); 
};

，這裏是你的HTML（project.html）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Tha gamiso ton Map</title> 
    <style> 
     html, body { 
      width: 100%; 
      height: 100%; 
     } 

     .container { 
      width: 100%; 
      height: 100%; 
      display: flex; 
     } 

     .sidebar { 
      width: 20%; 
     } 

     #map { 
      width: 80%; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="sidebar"> 
      <div> 
       <input placeholder="Search…" type="search" data-bind="textInput: query" autocomplete="off"> 
       <ul data-bind="foreach: filteredlocList"> 
        <li data-bind="text: title, click: $parent.setLoc"></li> 
       </ul> 
      </div> 

     </div> 
     <div id="map"> 

     </div> 
    </div> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhBhCpY58VPkKqX96p2JxfQxL12A-DkZg&callback=initMap" 
      async defer></script> 
    <script src="knockout-3.4.2.js"></script> 
    <script src="app2.js"></script> 

</body> 
</html>

來源

2017-07-29 01:08:58

謝謝你這麼多，你只要給我一些全新的東西。 – Morpheus

這個網站有很多實用功能，你可以用於淘汰賽http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html –

你好，真的很抱歉打擾你。在我們上次的演講中，您幫助我認識瞭解開你的觀察對象，並且以一種聰明的方式改進了我的代碼，現在他們要求我創建一個搜索框來過濾列表以及我可以使用的列表結果setLoc（）使適當的製造商跳躍。我正在使用2個新文件PROJECT1.html和APP4.js我想過使用模板來顯示查詢結果，但我迷路了。也想到使用ko.utils.arrayFilter，但似乎我無法通過。你能plz幫助，再次感謝你這麼多 – Morpheus

Knouckout js與谷歌地圖連接

回答

相關問題