如何使这些 Google 地图标记可过滤？答案

【问题标题】：How can I make these Google map markers filterable?如何使这些 Google 地图标记可过滤？
【发布时间】：2017-08-04 18:31:48
【问题描述】：

我正在尝试研究如何使这些 Google 地图标记可过滤。这种不通过数组输入数据的奇怪方法的原因是，标记是从 Wordpress 后查询创建的，这是唯一成功的方法。

我基本上是想让它针对选定的类别进行过滤，其方式与您通常使用的方式类似：for (i = 0; i < markers.length; i++) {

非常感谢任何帮助。

$('input.markers').each(function(){
        title       = $(this).data('title');
        description = $(this).data('description');
        lat         = $(this).data('lat');
        lng         = $(this).data('lng');
        url         = $(this).data('url');
        img         = $(this).data('featuredimage');
        comments    = $(this).data('comments');

        //var to the box that will wrap the marker's content
      var  content = '<img src="' + img +'" class="img-responsive" />' +
    '<div class="info_content">' +
    '<h3>'+ title +'</h3>' +
    '<p>'+ description +'</p>' +
    '<p><small>'+ comments +'</small></p>' +
    '<a class="btn btn-green" href="'+ url +'">READ MORE</a></div>';

        //create marker
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map:map,
            title: title,
            icon: image,
        });

        var position = new google.maps.LatLng(lat, lng);
        var info = $('#marker-info');

    $('#marker-close').click(function() {
        $('#marker-info').fadeOut();
    });

});

【问题讨论】：

标签： javascript wordpress google-maps google-maps-api-3

【解决方案1】：

成功！ - 设法把它变成一个数组。

var markers1 = $("input.markers").map(function() {

title       = $(this).data('title');
lat         = $(this).data('lat');
lng         = $(this).data('lng');
category    = $(this).data('category');
description = $(this).data('description');
url         = $(this).data('url');
img         = $(this).data('featuredimage');
comments    = $(this).data('comments');   

return [[ title, lat, lng, category, '<img src="' + img +'" class="img-
responsive" />' +'<div class="info_content">' +'<h3>'+ title +'</h3>' +'<p>'+ 
description +'</p>' +'<p><small>'+ comments +'</small></p>' +'<a class="btn 
btn-green" href="'+ url +'">READ MORE</a></div>' ]];

}).toArray();

【讨论】：