淘汰添加标记到谷歌地图

Question

我正在尝试在谷歌地图中添加标记。现在它显示了加载时的所有标记。任何想法，如何只显示它单击的标记。

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>

还有其他建议吗？

Answer 1

好的，(我使用了您原始帖子中的数据(当您单击它创建标记的地方之一时，我想我已经很接近了(只是无法弄清楚如何在制作新标记之前摆脱旧标记(无论如何运行下面的代码片段。

function loc(d) {
   var self = this;
   this.lat = ko.observable(d.lat);
   this.lng = ko.observable(d.lng);
 }
 function point(tag, name, location) {
   var self = this;
   this.tag = ko.observable(tag);
   this.name = ko.observable(name);
   this.location = new loc(location);
 }
 function viewModel() {
   var self = this;
   this.points = ko.observableArray('');
   this.selectedPoint = ko.observable('');
   this.setSelected = function(item) {
     self.selectedPoint(item);
     var locations = ko.toJS(self.filteredNames)
     $.each(locations, function(i, item) {
       var marker = new google.maps.Marker({
         position: item.location,
         title: item.name
       });
       marker.setMap(map);
       map.setCenter(marker.getPosition());
     });
   }
   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 map;
 var data = [{
   tag: "places",
   name: "Dubai Marina",
   location: {
     lat: 24.4473236,
     lng: 54.3927349
   }
 }, {
   tag: "places",
   name: "Burj Khalifa",
   location: {
     lat: 24.4707202,
     lng: 54.3422700
   }
 }, {
   tag: "Coffee",
   name: "StarBucks",
   location: {
     lat: 24.4707202,
     lng: 54.3422700
   }
 }, {
   tag: "Coffee",
   name: "Costa",
   location: {
     lat: 24.4752239,
     lng: 54.3388363
   }
 }, {
   tag: "Club",
   name: "Beach Club",
   location: {
     lat: 24.4707202,
     lng: 54.3422700
   }
 }, {
   tag: "Club",
   name: "Cheers Club",
   location: {
     lat: 24.4707202,
     lng: 54.3422700
   }
 }];
 var vm = new viewModel();
 function initialize() {
   var myLatlng = new google.maps.LatLng(-34.397, 150.644);
   var myOptions = {
     zoom: 14,
     center: new google.maps.LatLng(24.4481884, 54.3803007),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 }
 $(document).ready(function() {
   initialize();
   ko.applyBindings(vm);
   $.each(data, function(i, item) {
     vm.points.push(new point(item.tag, item.name, item.location))
   })
 });

#map_canvas {
    height: 560px;
    width: 100%
  }
  
  #map_canvas img {
    max-width: none;
  }
  
  #map_canvas div {
    -webkit-transform: translate3d(0, 0, 0);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<div style=height:50px;></div>
  <ul  data-bind="foreach:uniquetags">
    <li data-bind="text:$data, click: $parent.setSelected"></li>
  </ul>
<div data-role="content">
  <div id="map_canvas"></div>
</div>