Knockout js与谷歌地图的连接答案

【问题标题】：Knouckout js connection with google mapKnockout js与谷歌地图的连接
【发布时间】：2017-07-30 20:44:19
【问题描述】：

我是新来的。我目前在一个项目中尝试创建一个列表，通过使用敲除使地图上的标记产生效果。

我根据数组中的数据创建了带有标记的地图。然后通过使用 ViewModel 和 knockoutjs，我创建了一个可观察数组，并在左侧边栏上创建了一个列表，其中包含该可观察数组中的标题。现在我正在尝试将左侧边栏中的标题连接到标记，并在列表标题和标记标题相等时使它们反弹。我正在尝试通过循环来做到这一点，因为当我将 click 与 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

我是一名新开发人员，请您帮助新人，请使用简单的术语，因为我没有太多经验。

【问题讨论】：

标签： google-maps knockout.js

【解决方案1】：

我认为你需要解开你的 observables。我拉下了你的代码并让它工作。这是更改后的功能。

 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>

【讨论】：

非常感谢，您刚刚向我展示了一些全新的东西。
这个网站有很多实用功能可以用来淘汰knockmeout.net/2011/04/utility-functions-in-knockoutjs.html
再次您好，非常抱歉打扰您。在我们上次的演讲中，你帮助我实现了展开你的 observables 并且我以一种聪明的方式改进了我的代码，现在他们要求我创建一个搜索框来过滤列表和我可以使用的列表的结果setLoc() 使适当的制造商跳跃。我正在使用 2 个新文件 PROJECT1.html 和 APP4.js 我想使用模板来显示我的查询结果，但我迷路了。也想过使用 ko.utils.arrayFilter 但似乎我无法通过它。你能帮忙吗，再次感谢你
对不起，我的意思是 project2.html 和 app5.js
他们是我做的，名称不再显示并且过滤不起作用