2

我一直在使用 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>
4

2 回答 2

1

这是一个常见问题，可能是 UI 中的错误，您设置的属性是数字，您应该将其设置为字符串，将 marker.status 替换为 ""+marker.status 和您发现的相同内容！

于 2013-09-25T20:16:21.590 回答
0

问题似乎是您正在设置调用时调用的自定义属性statusSelect，addMarker然后查找调用tags时调用的属性find。更改property: 'tags'为property: 'statusSelect'它应该可以工作。

当你绑定你的事件时，你也在做一些相当奇怪的事情——你change每次创建一个标记时都会绑定一个新事件，所以如果你有 100 个标记，你将有 100 个change事件侦听器，它们都会依次触发并执行同样的事情。您应该移出$("#statusSelect").change(...)您的$.each函数，因此只有一个事件处理程序被绑定。

因此，您的代码应为：

$('#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);
            });
        });
    });
});
于 2012-11-17T03:28:11.403 回答