如何使这些Google地图标记可过滤?

时间:2017-08-04 18:31:49

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

我试图找出如何使这些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();
    });

});

1 个答案:

答案 0 :(得分:0)

成功! - 管理将其变成数组。

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();