使用jQuery Ui Map过滤

时间:2014-11-24 08:30:32

标签: jquery google-maps jquery-ui google-maps-api-3 jquery-ui-map

我正在使用 jQuery UI Map 旧版本。那时过滤正在完美。我正在使用的代码< strong>旧版:

$('#map_canvas').gmap({ 'center':new google.maps.LatLng(43.730531,-79.416927), 'callback': function() {

            $.getJSON( 'path to json', 'category=activity', function(data) { 

                $.each( data.markers, function(i, m) {

                    $('#map_canvas').gmap('addMarker', { 'tag': m.area, 'position': new google.maps.LatLng(m.latitude, m.longitude), 'center': new google.maps.LatLng(m.latitude, m.longitude), 'bounds': true } )

                    .click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content': m.content }, this); });


                });
            });

            $("#some").change(function() {
                                    var bounds = new google.maps.LatLngBounds();
                                    var tag = $(this).val();
                                    if ( tag == '*' ) {
                                        $('#map_canvas').gmap('findMarker', 'tag', tag, function(found, marker) {
                                            marker.setVisible(true); 
                                            bounds.extend(marker.position);
                                            marker.map.fitBounds(bounds);   
                                        });
                                    } else {
                                        $('#map_canvas').gmap('findMarker', 'tag', tag, function(found, marker) {
                                            if (found) {
                                                marker.setVisible(true); 
                                                bounds.extend(marker.position);
                                                marker.map.fitBounds(bounds);
                                            } else { 
                                                marker.setVisible(false); 
                                            }
                                        });
                                    }
                                    $('#map_canvas').gmap('option', 'center', bounds.getCenter());
                                });
        }

但是当我切换到新版本时,我无法进行过滤。我用于过滤新版本的代码:

 $('#map_canvas').gmap({ 'center':new google.maps.LatLng(43.730531,-79.416927), 'callback': function() {

$.getJSON( 'path to json', 'category=activity', function(data) { 

    $.each( data.markers, function(i, m) {

        $('#map_canvas').gmap('addMarker', { 'tag': m.area, 'position': new google.maps.LatLng(m.latitude, m.longitude), 'center': new google.maps.LatLng(m.latitude, m.longitude), 'bounds': true } )

        .click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content': m.content }, this); });


    });
});

$("#some").change(function() {
                        var bounds = new google.maps.LatLngBounds();
                        var tag = $(this).val();
                        if ( tag == '*' ) {
                            $('#map_canvas').gmap('find', 'markers', { 'property': 'tag', 'value': tag }, function(marker, isFound) {
                                marker.setVisible(true); 
                                bounds.extend(marker.position);
                                marker.map.fitBounds(bounds);   
                            });
                        } else { 
                            $('#map_canvas').gmap('find', 'markers', { 'property': 'tag', 'value': tag }, function(marker, isFound) {
                                if (isFound) {
                marker.setVisible(true); 
                                    bounds.extend(marker.position);
                                    marker.map.fitBounds(bounds); 
                                } else {  
                                    marker.setVisible(false);
                                }
                            });
                        }
                        $('#map_canvas').gmap('option', 'center', bounds.getCenter());
                    });

}

});

上面的代码适用于所有标记(标记值为*)。但是对于其他属性,它不起作用。当我尝试调试它时,我发现它是没有进入if(isFound)部分。但是有标签。所以应该去。

您可以找到其文档here

1 个答案:

答案 0 :(得分:1)

文档似乎不正确/不是最新的。

属性(本例中为tag)必须是数组,否则过滤将始终失败。

替换标记创建:

'tag': m.area

'tag': [m.area]