2013-04-30 42 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