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 に置き換えて、find で同じことを行います。

于 2013-09-25T20:16:21.590 に答える
0

statusSelect問題は、 を呼び出すときに呼び出されるカスタム プロパティを設定してから、 を呼び出すときに呼び出さaddMarkerれるプロパティを探していることです。に変更すると、動作するはずです。tagsfindproperty: 'tags'property: 'statusSelect'

また、イベントをバインドするときにかなり奇妙なことをしています。changeマーカーを作成するたびに新しいイベントをバインドしているため、100 個のマークがある場合、100 個のchangeイベント リスナーがあり、すべてが順番に起動して実行されます。同じこと。$("#statusSelect").change(...)関数の外に移動する必要が$.eachあるため、バインドされるイベント ハンドラーは 1 つだけです。

したがって、コードは次のようになります。

$('#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 に答える