Javascript 谷歌地图自定义HTML标记和MarkerClustererPlus

我有一个带有自定义HTML标记和MarkerClusterer的地图，clusterer工作正常，但我想按半径过滤标记到某个位置，我能够获得给定半径内的标记，但是我无法隐藏给定半径外的标记，并从MarkerClusterer仅显示该半径内的标记

我定义的自定义标记如下：

function CustomMarker(latlng, map, args)
{
    this.latlng = latlng;
    this.args = args;
    this.setMap(map);
    this.map = map;
}

CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function ()
{
    var self = this;

    if (!this.div)
    {
        var div = document.createElement('div');

        div.className = 'marker';
        div.style.position = 'absolute';
        div.style.cursor = 'pointer';

        var span = document.createElement('span');
        span.innerHTML = 'X';

        div.appendChild(span);

        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);

        this.div = div;
    }

    var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

    if (point)
    {
        this.div.style.left = (point.x - 20) + 'px';
        this.div.style.top = (point.y - 20) + 'px';
    }

    google.maps.event.addDomListener(this.div, "click", function (event)
    {
        google.maps.event.trigger(self, "click");
    });
};

CustomMarker.prototype.remove = function ()
{
    if (this.div)
    {
        this.div.parentNode.removeChild(this.div);
        this.div = null;
    }
};

CustomMarker.prototype.getPosition = function ()
{
    return this.latlng;
};

CustomMarker.prototype.getDraggable = function ()
{
    return false;
};

CustomMarker.prototype.setVisible = function (visible)
{
    if (this.div)
    {
        if (visible)
        {
            this.div.style.display = 'table';
            this.visible = true;
        }
        else
        {
            this.div.style.display = 'none';
            this.visible = false;
        }
    }
};

CustomMarker.prototype.getVisible = function ()
{
    return this.visible;
};

我正在使用MarkerClustererPlus，使用

setIgnoreHidden（true）

将隐藏所有标记，包括应该可见的标记

我注意到MC+在使用

setIgnoreHidden（true）

时使用的

marker.getVisible（）

，对于给定半径以外的标记返回false，但对于簇内的标记未定义

我认为这是因为当一个集群形成时，集群中的元素被移除，而不仅仅是隐藏，因此将它们设置为null

CustomMarker.prototype.remove = function ()
{
    if (this.div)
    {
        this.div.parentNode.removeChild(this.div);
        this.div = null;
    }
};

参见示例JS Fiddle

---

如果希望标记可见，则需要设置其

映射

属性：

for (var n = 0; n < this.markers.length; n++) {
  var marker = this.markers[n];
  var distance = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), location) / 1609;
  if (distance > radius) {
    // 4 Markers over 10 mile radius should be hidden
    marker.setVisible(false);
  } else {
    // Only 1 marker should be kept visible
    marker.setMap(this.map);
    visibleMarkers.push(marker);
  }
  console.log(marker.getVisible());
}

滤器

单击过滤器按钮应显示1个标记，边界设置正确，但标记不可见。


如果在单击“过滤器”按钮之前单击集群，集群内的标记将可见，并且单击“过滤器”将按预期工作，因为集群内没有标记。

如果希望标记可见，则需要设置其

映射

属性：

for (var n = 0; n < this.markers.length; n++) {
  var marker = this.markers[n];
  var distance = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), location) / 1609;
  if (distance > radius) {
    // 4 Markers over 10 mile radius should be hidden
    marker.setVisible(false);
  } else {
    // Only 1 marker should be kept visible
    marker.setMap(this.map);
    visibleMarkers.push(marker);
  }
  console.log(marker.getVisible());
}

滤器

单击过滤器按钮应显示1个标记，边界设置正确，但标记不可见。


如果在单击“过滤器”按钮之前单击集群，集群内的标记将可见，并且单击“过滤器”将按预期工作，因为集群内没有标记。