0
Googleマップにマーカーを追加しようとしています。リストからアイテムをクリックしています。 現在、そのマーカーはすべてのマーカーを表示します。どんなアイデアでも、クリックしたマーカだけを表示する方法。ノックアウト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));
})
});
HTML
<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>
他の提案？
私はあなたのオリジナルのポストから私の答えを変更しました。これはあなたが後になったものですか？ https://jsfiddle.net/bdellinger/su14xuck/3/ –
@BryanDellinger、実際に私もgooglemapを追加しています。「club」をクリックするとクラブのリストアイテムが表示され、アイテムをクリックするとgoogleマップにGoogleマーカーが表示されます。私はレポを見つける。 http://museum.oxanaweb.com/ しかし、私のapprochは異なっています、リストから項目をクリックすると、ピンが表示されます。他の知っているそれはちょうど地図 – faisal