Google Maps API v.3在单击标记时清除并添加标记

Question

I am pulling markers from a MySQL database table of locations, which uses a nested set model for hierarchical categorization. That part is working well. I can place all markers on the map, using MarkerManager to show/hide at different zoom levels (using the 'depth' field from my table). That works nicely. My issue is that if a marker for a country is clicked on, I would like all markers outside that country to be removed. Getting a single country's markers is trivial, I just feed a parent id to the xhr function. But clearing the markers... this is stumping me. I've been working at it for days, and just can't seem to make headway.

Here is the business-end of the JS

        var map         = new google.maps.Map(document.getElementById('gMap'), mapOptions);
    // init the markerManager
    var mgr         = new MarkerManager(map);
    //Associate the styled map with the MapTypeId and set it to display.
    map.mapTypes.set('Dark', darkMap);
    map.mapTypes.set('Light', lightMap);
    map.setMapTypeId('Dark'); 

    // lat lng bounds for center/zoom marker
    var bounds      = new google.maps.LatLngBounds();

    // infowindow (infobox)
    // init here, and re-use
    var ib          = new InfoBox();
    var oldDraw     = ib.draw;
    ib.draw         = function() {
        oldDraw.apply(this);
        jQuery(ib.div_).hide();
        jQuery(ib.div_).fadeIn('slow');
    }

    // init marker list
    // for removing 'old' markers and loading new ones
    var markersArray= [];

    // load markers from database

    function loadMarkers(params) {
        var params = params || {};
        var pid = params.pid || 5;
        deleteOverlays(pid,function(){
            // alert("deleteOverlays(" + pid + ");")
            $.getJSON('/map/xhr_get_descendants', {
                pid : pid
            }, function(data) {
                var bounds = new google.maps.LatLngBounds();
                $.each(data, function(key, val) {
                    if (val.lat_long && val.lat_long != '') {
                        var name = val.name;
                        var id = val.id;
                        var depth = val.depth;
                        var children = val.children;
                        var pos = val.lat_long.split(',');
                        var lat = parseFloat(pos[0]);
                        var long = parseFloat(pos[1]);
                        var myLatLng = new google.maps.LatLng(lat, long);
                        var html = "<b>NAME=>" + name + "\nID=>" + id + "\nDEPTH=>" + depth+"</b>";
                        var marker = new google.maps.Marker({
                            position : myLatLng
                        });
                        mgr.addMarker(marker, depth);
                        markersArray.push(marker);
                        var boxText = document.createElement("div");
                        google.maps.event.addListener(marker, 'mouseover', function() {
                            /*
                             getStats(id);
                             //  */
                            boxText.innerHTML = html;
                            var infoBoxOptions = {
                                content : boxText,
                                disableAutoPan : true,
                                maxWidth : 0,
                                pixelOffset : new google.maps.Size(-140, 0),
                                zIndex : null,
                                boxClass : "infoBox",
                                closeBoxMargin : "2px 2px 2px 2px",
                                closeBoxURL : "http://www.google.com/intl/en_us/mapfiles/close.gif",
                                infoBoxClearance : new google.maps.Size(10, 10),
                                isHidden : false,
                                pane : "floatPane",
                                enableEventPropagation : false,
                            };
                            ib.setOptions(infoBoxOptions);
                            ib.open(map, marker);
                        })
                        google.maps.event.addListener(marker, 'mouseout', function() {
                            ib.close();
                        })

                        google.maps.event.addListener(marker, 'click', function() {
                            map.panTo(this.getPosition());
                            // getLinks(id);
                            if (children > 0) {
                                loadMarkers({
                                    pid : id
                                });
                            }
                        })
                        bounds.extend(myLatLng);
                    }
                });
                map.fitBounds(bounds);
            });
        });
    }


    // clear markers
    function deleteOverlays(pid,callback){
        if((markersArray)&&(markersArray.length > 1)) {
            for (var x in markersArray) {
                markersArray[x].setMap(null);
                markersArray[x]=null;
            }
            markersArray=[];
        };
        callback(pid);
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
        });
    }

    loadMarkers({
        pid:5
    });

So quickly, you can see that I send a parent id to the loadMarkers() among other things if necessary, and do some stuff, and then I call the deleteMarkers() function, the callback of which creates the markers, adds them to the manager and to the main markersArray[]

for brevity I'm not going to add the full Ajax call to xhr_get_descendants/ because without the Model it would be a bit meaningless. Anyway, the function returns id, name, depth of each "child" of the parent id provided, as well as how many children each one of those children might have.

I mean... this should work!!! LOL I've been looking at it wayyyy too long. I'd seriously appreciate any suggestions, or hints, or even a "why the hell are you doing it this way?"

Answer 1

The markers displayed by the MarkerMangager are not the markers you create (and supply as argument to mgr.addMarker() ), the MarkerManager creates new Instances and these Instances will not be deleted when you delete the Markers stored in markersArray (what doesn't have any visual effect, because the markers stored in markersArray are not visible)

You may call mgr.clearMarkers() in deleteOverlays() to delete also the Instances created by the MarkerManager, but the complete approach with the markersArray is unnecessary. You don't need this array at all, simply call mgr.clearMarkers() to remove the visible Markers.