Question

我正在尝试创建一个地图页面，用户可以在其中选择要在地图上显示的多个项目。我已经让地图使用谷歌地图javascript api，但它只根据网址中的ID一次显示一个项目。

我愿意接受建议，但我认为用户应该能够打开包含项目列表的弹出窗口或组合框。可以选择多个项目，当用户单击“确定”时，所选项目将传递到包含地图的部分视图中。

任何帮助将非常感谢，提前感谢!!

以下是网站其他部分可能有用的一些代码。我修改了一些在这种情况下有意义，所以如果它很草率我很抱歉。

弹出窗口，可以使用这个或某种组合框：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
 data-backdrop="static" data-keyboard="false" aria-hidden="false">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Select Assets</h4>
        </div>
        <div class="modal-body">
            <form>
    <input type="checkbox" id="select_all" /> All Assets
    @{ List<string> usedNodes = new List<string>(); }
    @foreach (var run in Model.Runs)
    {
        if (!usedNodes.Contains(run.NodeID))
        {
            if (run.GPS_Lattitude != zero && run.GPS_Longitude != zero)
            {
                <input type="checkbox" /> @run.NodeID
            }
            usedNodes.Add(run.NodeID);
        }
    }
</form>
        </div>
        <div class="modal-footer">
            <button id="cancel" type="button" class="btn btn-primary">Cancel</button>
            <button id="ok" type="button" class="btn btn-primary">Ok</button>
        </div>
    </div>
</div>

弹出脚本：

window.onload = function () {
    getMapMarkers();

    $('#cancel').on('click', function (e) {
        $('#myModal').modal('hide');
    });

    $('#ok').on('click', function (e) {
        $('#myModal').modal('hide');
        getMapMarkers();
    });
}

function getMapMarkers() {
    $.ajax({
        url: '@Url.Action("GetMarkers", "Map")',
        type: 'GET',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        data: { nodename: node, servername: server },
        success: function (???) {
            ???
        }
    });
}

部分视图更改脚本，非常适合从下拉列表中选择一个项目，但现在我需要能够选择多个项目：

$('#assetSelect').change(function () {
    var assetId = $(this).val();

    $.ajax({
        type: 'GET',
        url: "@Url.Action("MapData", "Map")",
        data: {
            Id: assetId
        },
        success: function (result) {
            $('#partialMap').html(result);
            $('#partialMap').fadeIn('fast');
        }
    });
});

弹出窗口中显示的select all复选框的脚本执行了它应该执行的操作，但是当您取消选中任何其他项时，它需要取消选中：

$('#select_all').click(function () {
    var c = this.checked;
    $(':checkbox').prop('checked', c);
});

再次感谢！

包含可选项的弹出窗口，提交以更新局部视图

0 个答案: