Question

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

我已根据数组中的数据创建了带有标记的地图。然后通过使用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

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

Answer 1

我认为你需要解开你的观察物。我下载了你的代码并让它运行起来。这是改变的功能。

 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>

Knouckout与谷歌地图的连接

1 个答案: