完全破壞gmap3上的標記

Question

我想讓用戶放下最多10個標記並將它們移除onClick。當用戶添加標記或拖拽時，我還會用地圖上標記的座標更新「div」。除了當用戶刪除一個標記時，我有一切工作，當我循環通過標記時，它似乎仍然在地圖上。任何想法我做錯了什麼？

的jsfiddle：jsfiddle.net/ryanverdel/WRyrJ/

代碼：

$(document).ready(function() { 

     var markerCount = 0; 

     $("#test1").gmap3({ 
      map: { 
       options: { 
        center: [-2.2214281090541204, -78.695068359375], 
        zoom: 8, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        mapTypeControl: true, 
        mapTypeControlOptions: { 
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
        }, 
        navigationControl: true, 
        scrollwheel: true, 
        disableDoubleClickZoom: true, 
        streetViewControl: false, 

       }, 
       events: { 


        click: function (map, event) { 

         if(markerCount < 10){ 


         $(this).gmap3(

          { 
           marker: { 
            latLng: event.latLng, 
            options:{ 
            draggable: true, 
            animation: google.maps.Animation.DROP, 
            }, 



            events: { 
            click: function(marker) { 

            marker.setMap(map); 
            marker.setMap(null); 
            marker = null; 
            delete marker; 
            console.log(marker); 

            markerCount--; 
             }, 

            dragend: function(marker) { 
            $("#inputArray").empty(); 

          setTimeout(function(){ 
          var markers = $("#test1").gmap3({ 
          get: { 
          all: true 
          } 
          }); 

          $.each(markers, function(i, marker){ 

          $("#inputArray").append('<p>{"latitude":' + marker.position.lat() +', '+ '"longitude":' + marker.position.lng() +'},'+'</p>'); 
          }); 
          }, 400); 



             } 


             }, 


            }, 


           }); 

          markerCount++; 

          $("#inputArray").empty(); 

          setTimeout(function(){ 
          var markers = $("#test1").gmap3({ 
          get: { 
          all: true 
          } 
          }); 

          $.each(markers, function(i, marker){ 

          $("#inputArray").append('<p>{"latitude":' + marker.position.lat() +', '+ '"longitude":' + marker.position.lng() +'},'+'</p>'); 
          }); 
          }, 400); 

         } 

         else{ 
          return false; 
         }; 

        } 
       } 
      } 
     }); 

    }); 

Answer 1

這樣的事情也許是比gmap3簡單的少。與直接google.maps API所需的相比，您需要稍微不同的心態。

禰主要poitns：

• 您需要提供一個ID，名稱或標記
• 您需要與clear
• 刪除標記你需要明智地利用回調的（標記gmap3方式）。

，這裏是你的代碼拆散成一組功能，配備必要的修正應用於

$(document).ready(function() { 
    var mapOpts = { 
     center: [-2.2214281090541204, -78.695068359375], 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
     }, 
     navigationControl: true, 
     scrollwheel: true, 
     disableDoubleClickZoom: true, 
     streetViewControl: false, 
    }; 
    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 
        }, 
        events: { 
         click: function() { 
          clearMarker(uid); 
         }, 
         dragend: listMarkers 
        }, 
        id: uid 
       } 
      }); 
      markerCount++; 
      listMarkers(); 
     } else { 
      return false; 
     }; 
    } 
    function listMarkers() { 
     $("#test1").gmap3({ 
      get: { 
       all: true, 
       callback: function(results) { 
        $("#inputArray").empty(); 
        $.each(results, function (i, marker) { 
         $("#inputArray").append('<p>{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '</p>'); 
        }); 
       } 
      } 
     }); 
    } 
    function clearMarker(uid) { 
     $('#test1').gmap3({ 
      clear: { 
       id: uid, 
       callback: function() { 
        listMarkers(); 
        markerCount--; 
       } 
      } 
     }); 
    } 

    var markerCount = 0; 

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

DEMO