Google Maps API v.3 在标记点击时清除和添加标记

Question

我从 MySQL 数据库位置表中提取标记，该表使用嵌套集模型进行分层分类。 那部分运作良好。 我可以在地图上放置所有标记，使用 MarkerManager 以不同的缩放级别显示/隐藏（使用表中的“深度”字段）。这很好用。 我的问题是，如果单击某个国家/地区的标记，我希望删除该国家/地区以外的所有标记。获得一个国家的标记是微不足道的，我只是将父 id 提供给 xhr 函数。但是清除标记......这让我很难过。我已经为此工作了几天，但似乎无法取得进展。

这里是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
    });

很快，你可以看到我在必要时向 loadMarkers() 发送了一个父 ID，并做一些事情，然后我调用 deleteMarkers() 函数，该函数的回调创建标记，添加他们给经理和主要的markersArray[]

为简洁起见，我不会将完整的 Ajax 调用添加到 xhr_get_descendants/，因为如果没有模型，它会有点毫无意义。 无论如何，该函数返回所提供的父 id 的每个“孩子”的 id、名称、深度，以及每个孩子可能有多少孩子。

我的意思是......这应该工作！哈哈 我一直在看它wayyyy太久了。我会非常感谢任何建议或提示，甚至是“你为什么要这样做？”

Answer 1

MarkerMangager 显示的标记不是您创建的标记（并作为参数提供给 mgr.addMarker()），MarkerManager 会创建新的实例，当您删除存储在 markersArray（什么没有任何视觉效果，因为markersArray中存储的标记是不可见的）

您可以在deleteOverlays() 中调用mgr.clearMarkers() 来删除由MarkerManager 创建的实例，但是使用markersArray 的完整方法是不必要的。您根本不需要这个数组，只需调用mgr.clearMarkers() 即可移除可见标记。