Question

我正在开发一个新的Wordpress网站，我的客户将在该网站上发布可用的公寓。这些对象将使用“地图”字段与高级自定义字段一起发布。对于发布的每个新对象，页面上的Google地图上都会显示一个标记。

现在，我的问题是，用户必须能够根据三件事过滤这些标记：最小房间数，最小面积，最大租金/价格。所以更具体一点。如果用户在输入滑块中将最小房间数设置为3，则应该仅显示具有至少3个房间的公寓，并且与其他过滤器选项相同。这不是问题，用户还需要能够一次过滤所有三个不同的选项。像这样;最小房间数= 3，最大租金= 1000，最小面积= 30平方米。现在它应该只在地图上显示与过滤器值匹配的标记。

这是我到目前为止所做的：

HTML

 <div class="range1">
 <label></label>
 <output for="object-room" class="room-output"></output>
 <input type="range" name="object-room" min="1" max="20" step="1" value="1">
 </div>

 <div class="range2">
 <label></label>
 <output for="object-size" class="size-output"></output>
 <input type="range" name="object-size" min="15" max="300" step="5" value="1">
 </div>

 <div class="range3">
 <label></label>
 <output for="object-price" class="price-output"></output>
 <input type="range" name="object-price" min="1000" max="20000" step="500" value="4500">
 </div>

的jQuery

  // Filter markers
  $marker.each(function(i, obj) {
    var objPrice = $(this).data("price");
    var objSize = $(this).data("size");
    var objRoom = $(this).data("room");

    $("[name=object-price]").on("change", function() {
      $("[for=object-price]").val(this.value + ' kr');
      var priceVal = this.value;

      if ( priceVal >= objPrice ) {
        marker.setVisible(true);
      } else {
        marker.setVisible(false);
      }

    }).trigger("change");

  });

Answer 1

按照以下步骤操作：

添加一个可供全局访问的数组var markers = []。（与map.markers的用法相同，但不要直接向SDK添加内容）
在add_marker()创建每个标记并将其推送到markers数组。您可以使用以下代码以便以后更轻松。

var marker = new google.maps.Marker(); //with your attribute.
var markerWithData = {'marker': marker, 'price': 123, ...} // all you data belong to that marker.
markers.push(markerWithData );

添加新功能filterMarker()：此功能获取您的过滤器数据并循环浏览markers并在数组项的marker属性中设置可见。

for(var i=0; i<markers.length; i++){
    //Check markers[i] need to be display or not.
    if(needDisplay){
        markers[i].marker.setVisible(true);
    }else{
        markers[i].marker.setVisible(false);
    }
}

我知道这不清楚，但我不知道如何更好地描述。如果您有任何疑问，请评论：）

Answer 2

感谢您的帮助！

它现在正在工作，这是我的解决方案：

<强>的jQuery

    var markers = []; //Global var 

    function add_marker( $marker, map ) {

      // var
      var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
      var icon = $marker.attr('data-icon');


      // create marker
      var marker = new google.maps.Marker({
              position: latlng,
              map: map,
              icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 3,
                strokeColor: '#f04a3e',
                fillColor: '#f04a3e',
                strokeWeight: 6
              },
      });

      // add to array
      map.markers.push( marker );
      markers.push( marker );

      //Filter markers
      $marker.each(function(i, obj) {
        var objPrice = $(this).data("price");
        var objSize = $(this).data("kvm");
        var objRoom = $(this).data("room");

        $(".filterSlider").on("change", function () {
            filterAll();
        });

        filterAll();

        function filterAll () {
            $('.filterSlider').each(function (i, obj) {
                var priceVal = $('#price').val();
                var roomVal = $('#room').val();
                var sizeVal = $('#kvm').val();
                var outputVal = $(this).prev().val(this.value);

                if ( priceVal >= objPrice && roomVal <= objRoom && sizeVal <= objSize ) {
                  marker.setVisible(true);
                } else {
                  marker.setVisible(false);
                }
            });
        }

      });
      }

使用输入滑块过滤Google地图标记

2 个答案: