1

我试图让用户最多删除 10 个标记并在单击时删除它们。当用户添加标记或拖动时，我还让它使用地图上标记的坐标更新“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;
                         }; 

                    }
                }
            }
        });

     });
4

1 回答 1

3

这类事情在 gmap3 中可能不那么简单。与直接 google.maps API 所需的心态相比，您需要稍微不同的心态。

你的主要观点：

  • 您需要为标记提供 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
            }
        }
    });
});

演示

于 2013-07-03T04:16:58.680 回答