Knockout.js 敲除添加标记到谷歌地图

我试图在Google地图中添加标记。单击列表中的项目时。 现在，它显示了装载的所有标记。 任何想法，如何只显示它单击的位置的标记

var data = [
    { tag: "places", name: 'Park Ave Penthouse', location: { lat: 40.7713024, lng: -73.9632393 } },
    { tag: "places", name: 'Chelsea Loft', location: { lat: 40.7444883, lng: -73.9949465 } },
    { tag: "places", name: 'Union Square Open Floor Plan', location: { lat: 40.7347062, lng: -73.9895759 } },
    { tag: "Hotel", name: 'East Village Hip Studio', location: { lat: 40.7281777, lng: -73.984377 } },
    { tag: "Hotel", name: 'TriBeCa Artsy Bachelor Pad', location: { lat: 40.7195264, lng: -74.0089934 } },
    { tag: "Hotel", name: 'Chinatown Homey Space', location: { lat: 40.7180628, lng: -73.9961237 } }
];

function point(tag, name,location) {
    var self = this;
    this.tag = ko.observable(tag);
    this.name = ko.observable(name);
    this.location = ko.observable(location);
}

function viewModel() {
    var self = this;
    var googleMap = map;

    this.points = ko.observableArray('');
    this.selectedPoint = ko.observable('');

    this.setSelected = function (item) {
        self.selectedPoint(item);
    }

    this.justtags = ko.computed(function () {
        var tags = ko.utils.arrayMap(this.points(), function (item) {
            return item.tag();
        });
        return tags.sort();
    }, this);

    this.uniquetags = ko.dependentObservable(function () {
        return ko.utils.arrayGetDistinctValues(self.justtags()).sort();
    }, this);

    this.filteredNames = ko.computed(function () {
        var filter = self.selectedPoint()
        if (!filter) {
        } else {
            return ko.utils.arrayFilter(this.points(), function (item) {
                if (item.tag() === filter) {
                    return item
                };
            });
        }
    }, this);
}


var vm;
vm = new viewModel();

function initMap() {
    var map,i,position;
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 40.7713024, lng: -73.9632393
        },
        zoom: 13
    });

    for (i=0; i<data.length; i++){
        // console.log(data[i].location);
        position = data[i].location;

        marker = new google.maps.Marker({
            position: position,
            map: map
        });

    }
}


$(document).ready(function () {
    ko.applyBindings(vm);
    $.each(data, function (i, item) {
        vm.points.push(new point(item.tag, item.name, item.location));
    })
});

var数据=[
{标签：“地点”，名称：'Park Ave Penthouse'，位置：{纬度：40.7713024，液化天然气：-73.9632393}，
{标签：“地点”，名称：'Chelsea Loft'，地点：{lat:40.7444883，lng:-73.9949465}，
{标签：“地点”，名称：“联合广场开放式平面图”，位置：{纬度：40.7347062，液化天然气：-73.9895759}，
{标签：“酒店”，名称：'East Village Hip Studio'，地点：{lat:40.7281777，液化天然气：-73.984377}，
{标签：“酒店”，名称：'TriBeCa Artsy单身公寓'，地点：{纬度：40.7195264，液化天然气：-74.0089934}，
{标签：“酒店”，名称：“唐人街家庭空间”，位置：{纬度：40.7180628，液化天然气：-73.9961237}
];
功能点（标签、名称、位置）{
var self=这个；
this.tag=ko.可观察（tag）；
this.name=ko.observable（name）；
此位置=可观察的高（位置）；
}
函数viewModel（）{
var self=这个；
var googleMap=map；
this.points=ko.observableArray（“”）；
该点=可观察的ko（“”）；
this.setSelected=功能（项目）{
自选点（项目）；
}
this.justtags=ko.computed（函数（）{
var tags=ko.utils.arrayMap（this.points（），函数（项）{
return item.tag（）；
});
return-tags.sort（）；
}，这个）；
this.uniquetags=ko.dependenttobservable（函数（）{
返回ko.utils.ArrayGetDistinctValue（self.justtags（））.sort（）；
}，这个）；
this.filteredNames=ko.computed（函数（）{
var filter=self.selectedPoint（）
如果（！过滤器）{
}否则{
返回ko.utils.arrayFilter（this.points（），函数（项）{
if（item.tag（）==过滤器）{
退货项目
};
});
}
}，这个）；
}
var-vm；
vm=新的viewModel（）；
函数initMap（）{
var图，i，位置；
map=new google.maps.map（document.getElementById（'map'）{
中心：{
lat:40.7713024，液化天然气：-73.9632393
},
缩放：13
});
对于（i=0；i
好的，（我使用了你的原始帖子中的数据）我想当你点击其中一个创建标记的位置时，我已经很接近了（只是不知道如何在创建新标记之前去掉旧标记），无论如何运行下面的代码段


功能定位（d）{
var self=这个；
this.lat=可观察的ko（d.lat）；
this.lng=可观察的ko（d.lng）；
}
功能点（标签、名称、位置）{
var self=这个；
this.tag=ko.可观察（tag）；
this.name=ko.observable（name）；
此位置=新loc（位置）；
}
函数viewModel（）{
var self=这个；
this.points=ko.observableArray（“”）；
该点=可观察的ko（“”）；
this.setSelected=功能（项目）{
自选点（项目）；
变量位置=ko.toJS（self.filteredNames）
$。每个（位置、功能（i、项目）{
var marker=new google.maps.marker({
位置：item.location，
标题：item.name
});
marker.setMap（map）；
map.setCenter（marker.getPosition（））；
});
}
this.justtags=ko.computed（函数（）{
var tags=ko.utils.arrayMap（this.points（），函数（项）{
return item.tag（）；
});
return-tags.sort（）；
}，这个）；
this.uniquetags=ko.dependentObservable（函数（）{
返回ko.utils.ArrayGetDistinctValue（self.justtags（））.sort（）；
}，这个）；
this.filteredNames=ko.computed（函数（）{
var filter=self.selectedPoint（）
if（！filter）{}else{
返回ko.utils.arrayFilter（this.points（），函数（项）{
if（item.tag（）==过滤器）{
退货项目
};
});
}
}，这个）；
}
var映射；
风险值数据=[{
标签：“地点”，
名称：“迪拜码头”，
地点：{
纬度：24.4473236，
液化天然气：54.3927349
}
}, {
标签：“地点”，
名称：“哈利法塔”，
地点：{
拉脱维亚：24.4707202，
液化天然气：54.3422700
}
}, {
标签：“咖啡”，
名称：“星巴克”，
地点：{
拉脱维亚：24.4707202，
液化天然气：54.3422700
}
}, {
标签：“咖啡”，
姓名：“科斯塔”，
地点：{
纬度：24.4752239，
液化天然气：54.3388363
}
}, {
标签：“俱乐部”，
名称：“海滩俱乐部”，
地点：{
拉脱维亚：24.4707202，
液化天然气：54.3422700
}
}, {
标签：“俱乐部”，
名称：“干杯俱乐部”，
地点：{
拉脱维亚：24.4707202，
液化天然气：54.3422700
}
}];
var vm=new viewModel（）；
函数初始化（）{
var mylatng=new google.maps.LatLng（-34.397150.644）；
变量myOptions={
缩放：14，
中心：新google.maps.LatLng（24.4481884,54.3803007），
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
}
$（文档）.ready（函数（）{
初始化（）；
ko.应用绑定（vm）；
$。每个（数据、功能（i、项）{
vm.points.push（新点（item.tag、item.name、item.location））
})
})；
#地图#画布{
高度：560px；
宽度：100%
}
#地图画布图像{
最大宽度：无；
}
#地图组{
-webkit转换：translate3d（0,0,0）；
}




我修改了你原来帖子中的答案。这就是你想要的吗？@BryanDellinger，实际上我也在添加谷歌地图，当点击“俱乐部”时，它会给出俱乐部列表项目，当点击任何项目时，谷歌标记会显示在谷歌地图上。我找到了repo。但我的方法不同，当点击列表中的项目时，然后会显示pin。其他wis就在地图上吗
<ul class="list-inline" data-bind="foreach:uniquetags">
    <li data-bind="text:$data, click: $parent.setSelected"></li>
</ul>

<!--list of points-->
<ul class="list-unstyled" data-bind="foreach:filteredNames">
    <li data-bind="text:name"></li>
</ul>
<!--list of points end-->

<div id="map"></div>