Question

我的名字是Eleni，这是第一次在这里发帖！这些天尝试使用 knockout.js 创建谷歌地图。此地图应该有一个左侧有位置的列表，按淘汰创建，我已经创建了，但是当用户点击同一个列表时也需要地图的标记是关于要显示的所选位置，所有其他位置都会消失，同时还有淘汰赛。

我已经阅读了很多关于这一点，但无法弄清楚伙伴们，我使用的一些资源：淘汰赛：“点击”绑定 connecting list view in knockout.js with map markers

如果有人可以查看我的github回购： https://github.com/Heleni/maps_udacity 和帮助，我会很感激!!! 提前谢谢！

Answer 1

您的github链接不正确并导致404.

但是在淘汰赛中，您可以轻松获得左侧提供的gmap所有积分的列表。当你点击它时，你只需要刷新你的地图。

Knockout的绑定让你刷新。

我认为淘汰赛的教程会告诉你如何。

祝你好运，

JBO

Answer 2

我想我发现了，

所以这里是你淘汰js代码你正在做什么。

告诉我是否有效：

function Coord(lat, ing) {
var self = this;
self.lat = ko.observable(lat);
self.ing = ko.observable(ing);
}

function Place(title, lat, ing, address) {
    var self = this;
    self.title = title;
    self.address = address;
    self.coords = ko.observable(new Coord(lat,ing));
    self.visible = ko.observable(true);

    //create a function to make the list of locations clikable
     self.myList = function() {
        map.setZoom(18);
        map.panTo({lat: self.coords().lat(), lng: self.coords().ing()});
        //map.setCenter(markers[title].getPosition());
    }; 
}

function LocationsViewModel() {
    var self = this;

    self.query = ko.observable('');

    self.places = ko.observableArray([
        new Place("Ble Cafe-Restaurant", 40.632286, 22.944743, "Street: Agias Sofias 19, 54623"),
        new Place("Olympion Bar-Restaurant", 40.632744, 22.941767, "Street: Aristotelous Square 10, 54623"),
        new Place("Olive and Oregon Restaurant", 40.634679, 22.943193, "Street: Aristotelous Square 10, 54623"),
        new Place("Mojo Cafe", 40.631824, 22.940958, "Aristotelous 4, 54623"),
        new Place("Seven Seas Restaurant", 40.633300, 22.939356, "Kalapothaki 10, 54624"),
        new Place("Varelakia Gyros", 40.574634, 22.949332, "Street: Riga Fereou 97, 56728"),
    ]);

    self.search = function() {
      for(var x in self.places()) {
        if( self.query() != '' && self.places()[x].title.toLowerCase().indexOf(self.query().toLowerCase()) < 0) {
           self.places()[x].visible(false);
        }else{
            self.places()[x].visible(true);
        }
      }
  };
}

ko.applyBindings(new LocationsViewModel());

我让你找出把它放在哪里。

这是html：

<div class="container">
<h1>Find Cafes and Restaurants in Thessaloniki City</h1>
<div class="myList">
  <form action="#">
    <!-- create search box for user's input -->
    <input placeholder="Search…" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
  </form>
  <div class="content">
    <!-- display the list -->
      <!--add the click event here to make the list clickable -->
    <ul data-bind="template: {name:'place', foreach:places}">

    </ul>
  </div>
</div>

以下是脚本应用程序中的模板

<li data-bind="visible: visible"><strong data-bind="text: title, click: myList"></strong></li>

我更新了搜索功能的代码。它在place对象中包含一个新的ko.observable，在LocationsViewModel中包含一个新函数，在html中包含一个新标记。

使用knockout.js

2 个答案: