2013-04-30 44 views
0

我想建立一个页面,我有四个地图。每次我将一个元素(车号)从表格拖放到地图上。该地图显示其位置。为什么Marker对象没有通过。? Marker为什么不清除?

这里是我的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也不起作用。它做错了什么?

回答

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

比赛应该有一个正则表达式,你有一个字符串

.match(/1$/)) 

,如果在该组你缺少在最后的人。

+0

仍然不能正常工作.. :( – writeToBhuwan 2013-04-30 13:34:11

+0

旧标记仍然没有得到清除.. – writeToBhuwan 2013-04-30 13:35:04

+0

修复了您所说的更改,但仍然无法正常工作..请帮助.. :( – writeToBhuwan 2013-04-30 13:49:51