Javascript 使用knockout.js创建谷歌地图

我的名字是Eleni，这是第一次在这里发帖！ 现在，尝试使用knockout.js创建一个谷歌地图。 这张地图应该有一个在左边的位置列表，通过敲除创建， 我已经创建了，但当用户单击同一列表时也需要， 与选定位置相关的地图标记将出现，而所有其他标记将消失，同时也会被击倒

我已经读了很多关于这方面的书，但还是搞不懂，伙计们，我使用的一些资源： 淘汰：点击绑定

如果有人可以查看我的github repo： 还有帮助，我会非常感激的！！！

---

提前谢谢

您的github链接不正确，导致404

但是在淘汰赛中，你可以很容易地在左边列出你在gmap中的所有分数。 当你点击它时，你只会用那个点刷新你的地图

Knockout的绑定为您带来全新体验

我想淘汰赛的教程会告诉你怎么做

祝你好运

JBO我想我发现了

因此，这里是你淘汰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());

功能协调（横向、纵向）{
var self=这个；
自横向=可观测的横向（横向）；
自标定=可观测（标定）；
}
活动地点（名称、时间、地点、地址）{
var self=这个；
self.title=标题；
self.address=地址；
self.coords=ko.observable（新坐标（lat，ing））；
自可见=可观察（真）；
//创建一个函数，使位置列表可剪裁
self.myList=function（）{
map.setZoom（18）；
panTo（{lat:self.coords（）.lat（），lng:self.coords（）.ing（）}）；
//map.setCenter（标记[title].getPosition（））；
}; 
}
函数位置viewmodel（）{
var self=这个；
self.query=ko.observable（“”）；
self.places=ko.array([
新广场（“Ble咖啡馆”，40.632286，22.944743，“街道：Agias Sofias 19，54623”），
新广场（“奥林匹恩酒吧餐厅”，40.632744，22.941767，“街道：亚里士多德广场1054623”），
new Place（“橄榄和俄勒冈州餐厅”，40.634679，22.943193，“街道：亚里士多德广场1054623”），
新广场（“魔咒咖啡馆”，40.631824，22.940958，“亚里士多德454623”），
new Place（“七海餐厅”，40.633300，22.939356，Kalapothaki 1054624”），
新地方（“瓦雷拉基亚陀螺仪”，40.574634，22.949332，“街道：里加费罗9756728”），
]);
self.search=函数（）{
for（self.places（）中的变量x）{
if（self.query（）！=''&&self.places（）[x].title.toLowerCase（）.indexOf（self.query（）.toLowerCase（））<0）{
self.places（）[x]。可见（false）；
}否则{
self.places（）[x]。可见（true）；
}
}
};
}
ko.applyBindings（新位置viewmodel（））；

我让你知道该放在哪里

以下是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>

我已经更新了搜索功能的代码。

---

它包括一个新的ko.observable in the place对象、LocationsViewModel中的一个新函数和html中的一个新标记。

这两个链接都显示为未找到页面，您介意将您的代码放在您的问题中吗？您好，谢谢通知，我刚刚上传了正确的链接，现在就可以了。只要上传链接，现在就可以了。我看了所有的敲除的导师，他们没有显示如何使用敲除到谷歌地图，所以对于第一次使用敲除的人来说是沮丧的。好的，我已经加载了你的项目，我会尽力帮助你。就我所见，你没有正确地使用它。让我们自我解释一下：函数myList（）{脚本的第229行正在使用您模型的title对象。但是函数不在模型中，因此title是未知的。您必须创建一个剔除对象，该对象将包含title以及至少要用于该对象的函数。然后在viewmodel中包含该对象的列表。在html中，这意味着您要迭代我已经在做你说的事情了，非常感谢你的建议，你可以很容易地把代码更正出来吗？谢谢你的时间。再次感谢，我只是用你的建议重新创建了这个项目，我不知道我是否不好，但是列表的标题是不可点击的我没有能力为每个标题显示一个标记。我将发布我的代码供您查看。在这里，您可以看到我的新脚本文件。我为place and coord编辑了代码，我将在稍后添加您需要使用的新html文件。您的搜索方法也不起作用，但我认为您将能够找到。也许这对我们有点帮助：这是我需要我的列表来做的工作：这实际上是我在我的机器上的代码。除了猫和选择上的文本。这对你仍然不起作用？我最终能在你的git上提交吗？