Question

我在这里有点腌菜。我已经设置了一个谷歌地图对象，使用标记显示机场位置。我甚至在某种程度上启用了群集。问题是我需要包含一个过滤器，允许用户：

过滤并显示某些类型的机场，即点击相应的复选框在距离中心点一定距离内显示标记。就像显示半径为＃miles内的所有标记一样。用户可以在文本字段中输入值以查看此值或使用滑块控件。

我对开始这个问题非常敬重 - 我需要一些帮助。

Answer 1

您可以做的是绘制圆圈（响应用户输入）。然后绘制落在该范围内的标记。每次重绘圆圈时，也会重绘所有标记。

// draw a circle of appropriate radius
var circleOptions = {
    center: destinationLatlng,
    radius: 500,  // or value from some formfield, in metres
    fillColor: "#FF0000",
    fillOpacity: 0.2,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 1
};

var circle = new google.maps.Circle(circleOptions);

var bounds = circle.getBounds();

// loop over your markers, and only draw the ones that are within these bounds
for (var i = 0; i < arrMarkers.length; i++) {
    if (bounds.contains(arrMarkers[i].getPosition())) {
        // only do setMap if the marker wasn't already visible 
        if (arrMarkers[i].getVisible() != true) {
            arrMarkers[i].setMap(map);
            arrMarkers[i].setVisible(true);
        }
    } else {
    // remove the ones that are not within the circle's bounds
        arrMarkers[i].setMap(null);
        arrMarkers[i].setVisible(false);
    }
}

您会注意到我同时执行setMap和setVisible。这样我就可以使用getVisible来确定是否需要重做setMap（因此避免对setMap进行不必要的函数调用 - 我认为我有一个闪烁的问题）。

所有这些都应该在响应用户输入而发生的功能中，例如当他们提交要求半径的表格时（或滑动滑块时）。这也应该从你的初始化函数中调用（如果你想在一开始画一个圆圈）。

当然，这假设您实际上想要在地图上显示一个显示该半径的圆圈;我觉得这很有用。但是，如果不这样做，则可以使用完全相同的消息，但只需将fillOpacity和strokeOpacity设置为0.0。

Answer 2

将标记添加到地图时，将标记的引用组织成类别：

var markers = { cat1: [...markers...], cat2: [...markers...] }

当用户选择cirtain类型时 - 只需在markers.catN

中设置或取消设置该标记的地图

需要在Google地图上为标记创建自定义过滤器 - 我从哪里开始

2 个答案: