0

我正在尝试构建一个页面，在该页面上我有四个地图。每次我将一个元素（车辆编号）从表格拖到地图上时。地图显示了它的位置。

这是我的 ASP 代码

        <input type="hidden" id="hf_div1" class="hf" />
        <input type="hidden" id="hf_div2" class="hf" />
        <input type="hidden" id="hf_div3" class="hf" />
        <input type="hidden" id="hf_div4" class="hf" />
        <%--  <div class="divDateTime">
        </div>--%>
        <asp:Panel ID="divContainer" runat="server" CssClass="containerPanel">
            <div class="innerDivClass ui-state-highlight" id="div1">

            </div>
            <div class="innerDivClass ui-state-highlight" id="div2">

            </div>
            <div class="innerDivClass ui-state-highlight" id="div3">

            </div>
            <div class="innerDivClass ui-state-highlight" id="div4">

            </div>
        </asp:Panel>

这是我的 jQuery

var arrayOfMapobjects = [];
var map1 = null;
var map2 = null;
var map3 = null;
var map4 = null;
var mrkr_div1;
var mrkr_div2;
var mrkr_div3;
var mrkr_div4;

$(document).ready(function() {

    $('#ctl00_ContentPlaceHolder1_grdVehicleList span').draggable({ helper: 'clone' });

    $('.innerDivClass').droppable({
        drop: function(event, ui) {
            var IDtoBeFound = 'hf_' + $(this).attr('id');
            //alert(IDtoBeFound);
            //alert(ui.draggable.attr('title'));
            var deviceID = ui.draggable.attr('title');
            //alert(deviceID);
            //alert('#' + IDtoBeFound);

            $('#' + IDtoBeFound).val(deviceID);

        }
    });
    var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map1 = new google.maps.Map(document.getElementById('div1'), mapOptions);
    map2 = new google.maps.Map(document.getElementById('div2'), mapOptions);
    map3 = new google.maps.Map(document.getElementById('div3'), mapOptions);
    map4 = new google.maps.Map(document.getElementById('div4'), mapOptions);
    mrkr_div1 = new google.maps.Marker();
    mrkr_div2 = new google.maps.Marker();
    mrkr_div3 = new google.maps.Marker();
    mrkr_div4 = new google.maps.Marker();
    setInterval(function() {
        $('.innerDivClass').each(function() {
            var account = $('#ctl00_sessionValue').val();
            console.log(account);
            var deviceID = $('#hf_' + $(this).attr('id')).val();
            //            alert('device ID is' + deviceID);
            //            console.log(deviceID);
            var mapObject = null;
            var markerobject = null;
            var divID = null;


            // I am assigning the values here, here is the actual problem... Please see the code below and tell me the problem :(



            if (deviceID != null && deviceID.trim() != '') {
                if ($(this).attr('id').match("1$")) {
                    mapObject = map1;
                    markerobject = mrkr_div1;
                }
                else if ($(this).attr('id').match("2$")) {
                    // alert('2');
                    mapObject = map2;
                    markerobject = mrkr_div2;
                }
                else if ($(this).attr('id').match("3$")) {
                    //alert('3');
                    mapObject = map3;
                    markerobject = mrkr_div3;
                }
                if ($(this).attr('id').match("4$")) {
                    // alert('4');
                    mapObject = map4;
                    markerobject = mrkr_div4;
                }


                getData(account, deviceID, mapObject, markerobject);
            }
        });
    }, 5000);
});

function getData(accountID, deviceID, mapObject, markerObject) {

    //    var account = $('#ctl00_sessionValue').val();
    //    var deviceID=$(
    //    var device=$(
    var dataToBePassed = { accountID: accountID, deviceID: deviceID };

    $.ajax({
        type: "POST",
        url: "MultiVehicleTracking.aspx/getLastDpOFDevice",   // call pageMethod on js_Dashboard.aspx
        data: JSON.stringify(dataToBePassed), // to convert in JSON format
        contentType: "application/json; charset=utf-8",
        dataType: "json", // type to be processed is JSON
        success: function(msg) {
            drawMap(JSON.parse(msg.d), mapObject, markerObject); // push the data in to array for further use and process the same
        },
        error: function(xhr, status) {
            console.log('Error: ' + status);  // display the erro messsage if request failed
        }
    });

}
function drawMap(jsonData, mapObj, markerObject) {
    if (markerObject != null) {
        markerObject.setMap(null);
        markerObject = null;
    }
    else {
        alert('marker is null');
    }
    var lat = jsonData[0].latitude;
    var lng = jsonData[0].longitude;
    alert(jsonData[0].imagePath);
    var myLatLng = new google.maps.LatLng(lat, lng);
    var image = new google.maps.MarkerImage(jsonData[0].imagePath,
                                                     null,
                                                     null,
                                                      new google.maps.Point(5, 17), //(15,27),
                                                     new google.maps.Size(30, 30));
    markerObject = new google.maps.Marker({
        position: myLatLng,
        icon: image,
        title: jsonData[0].address
    });

    markerObject.setMap(mapObj);
    mapObj.panTo(myLatLng);
    mapObj.setZoom(14);
}

在上面的代码中，我根据 div 的 ID 将地图和标记对象传递给函数。地图对象表现良好，但标记对象未传递到函数中。当我尝试做 markerObject.setmap(null); 它不工作吗？同样 markerObject=null 也不起作用。它做错了什么？

4

1 回答 1

0 
....match("1$"))

匹配应该有一个正则表达式，你有一个字符串

.match(/1$/))

并且您在该组中的最后一个 if 中缺少 else 。

于 2013-04-30T13:29:42.187 回答