在單選按鈕之間切換會導致重複的座標

我正在跑進一點泡菜。我有一個工作工具，利用jQuery的插件gMap3，並允許用戶在編寫JSON數組，放置引腳或地址之間進行選擇。該工具將JSON數組吐出到<textarea>中，以便稍後獲取信息。唯一的問題是，當「地址」被選中並且用戶決定選擇另一個選項，比如「拖放N」，然後返回到「地址」並輸入一個新的地址時，會創建重複的座標。！在單選按鈕之間切換會導致重複的座標

JSFIDDLE

場景：

在選擇點擊地址。
輸入輸入中的任何地址，然後單擊添加。
點擊拖曳選擇，然後再次選擇地址。
類型在不同的地址這時候輸入，點擊添加，看着重複的座標出現在<textarea>

代碼：

$(document).ready(function() { 

//////// GMAP3 JSON ARRAY //////// 

var mapOpts = { 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
    }, 
    navigationControl: true, 
    scrollwheel: true, 
    disableDoubleClickZoom: true, 
    streetViewControl: false, 
}; 

$(".gmap3").gmap3({ 
     map:{ 
     options: mapOpts 
     } 

    }); 

$.mapArray = function(){ 

$('#show_array').click(function(){ 

$('.gmap3').gmap3('clear', 'markers'); 

    var coordinates = $("#geofenceCoords_array").val(); 
    var jsonObj = jQuery.parseJSON(coordinates); 
    var addBtn = $("#show_array"); 

    var iconValues = 
    new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default.png', //icon url 
    new google.maps.Size(28.0, 43.0), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(14.0, 43.0)); 


    var shadowValues = 
    new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default_shadow.png', //icon shadow url 
    new google.maps.Size(50.0, 43.0), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(14.0, 43.0)); 

    $(".gmap3").gmap3({ 
    getlatlng:{ 
     callback: function(results){ 
      var markers=[]; 
      $.each(jsonObj, function(i, item) { 

      var marker = new Object(); 
       marker.lat = jsonObj[i].latitude; 
       marker.lng = jsonObj[i].longitude; 
       marker.options = new Object(); 
       marker.options.icon = iconValues; 
       marker.options.shadow = shadowValues; 
       markers.push(marker); 
      }); 


      $(".gmap3").gmap3({ 
      marker:{ 
       values: markers, 
       options: {draggable: false, 
       animation: google.maps.Animation.DROP 
       }, 

      }, 
      autofit:{maxZoom: 14}, 
     }); 
     } 
    } 
    }); 
}); 
    } 

//////// GMAP3 DRAG AND DROP //////// 

$.mapDrop = function(){ 

    var iconValues = 
    new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default.png', //icon url 
    new google.maps.Size(28.0, 43.0), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(14.0, 43.0)); 

    var shadowValues = 
    new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default_shadow.png', //icon shadow url 
    new google.maps.Size(50.0, 43.0), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(14.0, 43.0)); 

function genId() { 
     return '' + (new Date()).getTime(); 
    } 

    function addMarker(map, event) { 
     if (markerCount < 10) { 
      var uid = genId(); 
      $(this).gmap3({ 
       marker: { 
        latLng: event.latLng, 
        options: { 
         draggable: true, 
         animation: google.maps.Animation.DROP, 
         icon: iconValues, 
         shadow: shadowValues 
        }, 
        events: { 
         click: function() { 
          clearMarker(uid); 
         }, 
         dragend: listMarkers 
        }, 
        id: uid 
       } 
      }); 
      markerCount++; 
      listMarkers(); 

     } else { 
      return false; 
     }; 
    } 
    function listMarkers() { 
     $(".gmap3").gmap3({ 
      get: { 
       all: true, 
       callback: function(results) { 
        var coords = ''; 
        $("#geofenceCoords_dragndrop").empty(); 

        $.each(results, function (i, marker) { 
         //$("#inputArray").append('{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '<br>'); 
         coords+= ' {"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() +'},\n'; 
        }); 
        $("#geofenceCoords_dragndrop").val('['+'\n'+coords.substr(0, (coords.length-2))+'\n]'); 
       } 
      } 
     }); 
    } 
    function clearMarker(uid) { 
     $('.gmap3').gmap3({ 
      clear: { 
       id: uid, 
       callback: function() { 
        listMarkers(); 
        markerCount--; 
       } 
      } 
     }); 
    } 

    var markerCount = 0; 

    $(".gmap3").gmap3({ 
     map: { 
      options: mapOpts, 
      events: { 
       click: addMarker 
      } 
     } 
    }); 

} 

//////// GMAP3 ADDRESS //////// 

$.mapAddress = function(){ 



var mapOpts = { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
     }, 
     navigationControl: true, 
     scrollwheel: true, 
     disableDoubleClickZoom: true, 
     streetViewControl: false, 
    }; 

    var iconValues = 
    new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default.png', //icon url 
    new google.maps.Size(28.0, 43.0), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(14.0, 43.0)); 

    var shadowValues = 
    new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default_shadow.png', //icon shadow url 
    new google.maps.Size(50.0, 43.0), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(14.0, 43.0)); 


    $(".gmap3").gmap3({ 
     map:{ 
     options: mapOpts 
     } 

    }); 

    setTimeout(function() { 
    $('<span>').attr({ class: 'deleteIcon'}).appendTo(".gmap3"); 
    }, 200); 

    $('#test-ok').click(function(){ 
     var addr = $('#test-address').val(); 
     if (!addr || !addr.length) return; 
     $(".gmap3").gmap3({ 
     getlatlng:{ 
      address: addr, 

      callback: function(results){ 

      if (!results) return; 

      if (markerCount < 10) { 
      $(this).gmap3({ 
       marker:{ 

       latLng:results[0].geometry.location, 
       options:{ 
       icon: iconValues, 
       shadow: shadowValues 
       }, 
       map:{ 

        center: true, 

       }, 

       }, 
       autofit:{maxZoom: 14}, 

      }); 
      listMarkers(); 
      markerCount++; 
      $('#test-address').val(""); 

      }else { 
       $('#test-address').val("limit Reached"); 
       $('#test-address').css('color','red'); 
       $('#test-address').attr('readonly','readonly'); 
      return false; 
     }; 

      } 
     } 
     }); 
    }); 

    function listMarkers() { 
     $(".gmap3").gmap3({ 
      get: { 
       all: true, 
       callback: function(results) { 
        var coords = ''; 
        //$("#geofenceCoords_address").val(""); 

        $.each(results, function (i, marker) { 
         //$("#inputArray").append('{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '<br>'); 
         coords+= ' {"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() +'},\n'; 
        }); 
        $("#geofenceCoords_address").val('['+'\n'+coords.substr(0, (coords.length-2))+'\n]'); 
       } 
      } 
     }); 
    } 

    var markerCount = 0; 

    $('.gmap3').on('click', '.deleteIcon', function(){      
    //alert("Handler"); 
    if(markerCount <= 10){ 
     markerCount = 0; 
    } 
    $('.gmap3').gmap3('clear', 'markers'); 
    $("#geofenceCoords_address").val(''); 
    $('#test-address').val(''); 
    $('#test-address').css('color','black'); 
    $('#test-address').removeAttr('readonly'); 

    }); 

    $('#test-address').keypress(function(e){ 
     if (e.keyCode == 13){ 
     $('#test-ok').click(); 
     } 
    }); 
} 

//////// JSON ARRAY VALIDATION //////// 


$('#geofenceCoords_array').on('focusout keyup', function (e) { 
    var fieldValue = $(this).val(), 
    json; 

    try { 
    json = JSON.parse(fieldValue); 
    if (json.length > 3) { 
     throw new Error("E_TOO_MANY_COORD"); 
    } 

    _.each(json, function (coordinate) { 
     if (!_.has(coordinate, 'latitude') || !_.has(coordinate, 'longitude')) { 
      throw new Error("E_INVALID_COORD"); 
     } 
    }); 

    } catch (e) { 
    console.log(e.message); 
    // handle your invalid json and return to stop further execution 
    if (e.message === "E_TOO_MANY_COORD") { 
     $('#errorMessage').text("You cannot exeed more than 3 coordiniates"); 
     $('#errorMessage').removeClass().addClass('error'); 
     $('#show_array').removeClass().addClass('disabled'); 
    } else if (e.message === "E_INVALID_COORD") { 
     $('#errorMessage').html("Please provide valid coordinate pairs:<br> [{\"latitude\":33.851871,\"longitude\":-84.364336}]"); 
     $('#errorMessage').removeClass().addClass('warning'); 
     $('#geofenceCoords_array').css({ 
      'border': '1px solid black' 
     }); 
     $('#show_array').removeClass().addClass('disabled'); 
    } 

    return; 
} 

$('#arrayNum').text(json.length); 
$('#errorMessage').removeClass().addClass("hide"); 
$('#show_array').removeClass().addClass('enabled'); 
$('#errorMessage').text(""); 
$('#geofenceCoords_array').css({ 
    'border': '1px solid black' 
}); 

if ($('#arrayNum').text() == 0) { 
    $('#show_array').removeClass().addClass('disabled'); 
} 

}); 

$('#geofenceCoords_array').on('focusout mouseout', function (e) { 

var fieldValue = $(this).val(), 
    json; 

if (e.which === 8) return; 

try { 
    json = JSON.parse(fieldValue); 
} catch (e) { 
    console.log(e.message); 

    if (e instanceof SyntaxError) { 
     $('#errorMessage').text("Please use valid json"); 
     $('#errorMessage').removeClass().addClass('error'); 
     $('#geofenceCoords_array').css({ 
      'border': '1px solid red' 
     }); 
     $('#show_array').removeClass().addClass('disabled'); 
    } 

    if (fieldValue === "") { 
     $("#arrayNum").text("0"); 
     $('#geofenceCoords_array').css({ 
      'border': '1px solid black' 
     }); 
     $('#show_array').removeClass().addClass('disabled'); 
     $('#errorMessage').removeClass().addClass('hide'); 
    } 
    return; 
    } 

    }); 

$('html,body').on('mousemove', function (e) { 

var fieldValue = $("#geofenceCoords_array").val(), 
    json; 

if (e.which === 8) return; 

try { 
    json = JSON.parse(fieldValue); 
} catch (e) { 
    console.log(e.message); 

    if (e instanceof SyntaxError) { 
     $('#errorMessage').text("Please use valid json"); 
     $('#errorMessage').removeClass().addClass('error'); 
     $('#geofenceCoords_array').css({ 
      'border': '1px solid red' 
     }); 
     $('#show_array').removeClass().addClass('disabled'); 
    } 

    if (fieldValue === "") { 
     $("#arrayNum").text("0"); 
     $('#geofenceCoords_array').css({ 
      'border': '1px solid black' 
     }); 
     $('#show_array').removeClass().addClass('disabled'); 
     $('#errorMessage').removeClass().addClass('hide'); 
    } 
    return; 
    } 
    }); 


//////// MAP TRANSITIONS //////// 

$('#default_selection').prop("checked",true); 
$('#default_selection').attr("checked",true); 


$('#show_array').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) { 
    if($("#show_array").hasClass('enabled')){ 
    $.mapArray(); 
    } 
}); 


$("[name=mapSelect]").change(function() { 
    $('.gmap3').gmap3('destroy'); 


    if($(this).val() == 'JSONArray'){ 
    $('.gmap3').attr("id","newId1"); 
    $(".gmap3").gmap3({ 
     map:{options: mapOpts} 
    }); 
    $("#geofenceCoords_dragndrop").val(""); 
    $("#geofenceCoords_address").val(""); 
    $.mapArray(); 
    } 

    if($(this).val() == 'dragnDrop'){ 
    $('.gmap3').attr("id","newId2"); 
    $(".gmap3").gmap3({ 
     map:{options: mapOpts} 
    }); 
    $("#geofenceCoords_array").val(""); 
    $("#geofenceCoords_address").val(""); 
    $.mapDrop(); 
    } 

    if($(this).val() == 'addrSelect'){ 
    $('.gmap3').attr("id","newId3"); 
    $(".gmap3").gmap3({ 
     map:{options: mapOpts} 
    }); 
    $("#geofenceCoords_array").val(""); 
    $("#geofenceCoords_address").val(""); 
    $("#geofenceCoords_dragndrop").val(""); 
    $.mapAddress(); 
    } 


}); 

});

來源

2013-07-17 ryan

所以我做了一些調試，似乎在GMAP3地址部分的'＃test-ok'按鈕上有一個循環，每次用戶單擊單選按鈕「地址」時都會調用該按鈕。這可能是因爲我在單擊單選按鈕時調用的函數內部有點擊函數，但我不知道如何處理它。 – ryan

沒關係，得到它的工作。

我用：那我剛纔用$('#test-ok').unbind('click');，當我點擊的無線選擇拖動ñ跌落或JSON $('#test-ok').click(function(){ }

： $('#test-ok').bind('click',function(){ }

代替。

來源

2013-07-19 21:27:53 ryan

在單選按鈕之間切換會導致重複的座標

回答

相關問題