使用挖空.js创建一个谷歌地图

Question

我的名字是Eleni，这是第一次在这里发帖！ 这些天尝试使用敲除.js创建谷歌地图。 这张地图应该有一个列表，左侧有位置，通过挖空创建， 我已经创建了，但是当用户单击同一列表时也需要， 地图的标记，即要出现的选定位置，所有其他位置消失，也带有挖空。

我已经读了很多关于这个的信息，但无法弄清楚伙计们，我使用的一些资源： 敲除："点击"绑定 连接挖空中的列表视图.js与地图标记

如果有人可以看看我的GitHub存储库： https://github.com/Heleni/maps_udacity 和帮助，我会非常感谢!! 提前感谢！

Answer 1

我想我发现了，

所以这是你正在做的事情的淘汰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 中包含一个新标记。

Answer 2

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

但是在淘汰赛中，您可以轻松地在左侧列出您提供的 gmap 的所有积分。 当您单击它时，您仅使用该点刷新地图。

Knockout的绑定使您焕然一新。

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

祝你好运，

JBO