полностью уничтожить маркер на 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. Вам нужно немного другое мышление по сравнению с тем, которое требуется для прямого API google.maps.

Thee Основные poitns:

• Вы должны предоставить маркеры с идентификатором, имя или тег
• Вы должны удалить маркер с 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