Question

我一直在使用jQuery-UI-Map插件（http://code.google.com/p/jquery-ui-map/）开发一个映射程序。我有一个问题，我试图以多种不同的方式解决，但无济于事。

我有一个下拉列表，onchange应该过滤地图上的标记。

以下是与此问题相关的代码片段。使用此代码，当我从下拉列表中选择一个值时，将删除所有标记。

   $('#map').gmap().bind('init', function (evt, map) {
    $.getJSON('controllers/markers.json', function (data) {
        $.each(data.markers, function (i, marker) {
            $('#map').gmap('addMarker', {
                'position': new google.maps.LatLng(marker.latitude, marker.longitude),
                'icon': "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|" + marker.projectNumber + "|004162|FFFFFF|",
                'bounds': false,
                'statusSelect': marker.status
            })
        });
        $("#statusSelect").change(function () {
            $('#map').gmap('find', 'markers', {
                'property': 'statusSelect',
                'value': $(this).val()
            },

            function (marker, found) {
                if (found) {
                    $('#map').gmap('addBounds', marker.position);
                }
                marker.setVisible(found);
            });
        });
    });
});

这是我正在使用的JSON：

http://designsbymitch.com/markers.json

编辑：这是状态下拉列表的HTML -

<select id="statusSelect">
        <option value="Created">Created</option>
        <option value="Working">Working</option>
        <option value="Complete">Complete</option>
        <option value="Task">Task</option>
        <option value="Void">Void</option>
        <option value="delete">delete</option>
        <option value="Paid">Paid</option>
        <option value="Overdue">Overdue</option>
        <option value="Invoiced">Invoiced</option>
        <option value="Non-Billable Expense">Non-Billable Expense</option>
        <option value="Billable Expense">Billable Expense</option>
        <option value="Unpaid">Unpaid</option>
        <option value="new status mitch">new status mitch</option>
        <option value="new status mitch again">new status mitch again</option>
</select>

Answer 1

这是一个常见问题，可能是UI中的错误，你设置的属性是数字，你应该把它作为一个字符串用“”+ marker.status替换marker.status 在你的发现中同样的事情！

Answer 2

问题似乎是，当您致电statusSelect时，您正在设置名为addMarker的自定义属性，然后在致电{{1}时查找名为tags的属性}。将find更改为property: 'tags'，它应该有效。

当您绑定事件时，您也会做一些相当奇怪的事情 - 每次创建标记时，您都会绑定一个新的property: 'statusSelect'事件，所以如果您有100个标记，则会有100个{{1事件监听器，它们将按顺序触发并执行相同的操作。您应该将change移到change函数之外，因此只绑定了一个事件处理程序。

因此，您的代码应为：

$("#statusSelect").change(...)

根据属性jQuery-UI-Map显示/隐藏标记（Google maps API V3）

2 个答案: