如何访问和隐藏由loadGeoJson()创建的标记？
我正在通过JSON将自定义坐标加载到我的地图应用程序中。我已经能够了解如何根据特征属性对标记进行颜色编码，但我的下一步将是创建过滤器，以根据属性显示或隐藏标记。
我的代码是这样开始的：
var map;
var infowindow = new google.maps.InfoWindow();
function initialize()
{
var mapCanvas = document.getElementById('map');
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
map.data.loadGeoJson('/map_json.php', null, SetBounds);
map.data.setStyle(function(feature) {
var color = 'FF0000';
var symbol = '%E2%80%A2'; // dot
// color selection code here [...]
return /** @type {google.maps.Data.StyleOptions} */ {
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=' + symbol + '|' + color
};
}我已经找到了如何通过jquery自动完成搜索来访问导入的数据：
$(input).autocomplete({
minLength: 0,
source: function(request, response) {
data = [];
map.data.forEach(function(feature)
{
var str = request.term.toUpperCase();
if (String(feature.getProperty('name')).toUpperCase().indexOf(str) > -1)
{
data.push({id: feature.getProperty('id'), name: feature.getProperty('name'), address: feature.getProperty('address')});
}
});
response(data);
},
select: function(event, ui)
{
map.data.forEach(function(feature)
{
if (feature.getProperty('id') == ui.item.id)
{
var content = GetContent(feature);
infowindow.setContent(content);
infowindow.setPosition(feature.getGeometry().get());
infowindow.setOptions({pixelOffset: new google.maps.Size(0, -34)});
infowindow.open(map);
// zoom in
map.setZoom(15);
map.panTo(feature.getGeometry().get());
return false;
}
});
}
})
.autocomplete().data('uiAutocomplete')._renderItem = function(ul, item)
{
return $('<li>')
.append('<a>' + item.name + ' (ID: ' + item.id + ')<br>' + item.address + '</a>')
.appendTo(ul)
};因此，使用相同的原则来运行我的过滤器不是问题。
问题是，我还没有找到一种基于map.data中的feature信息来访问可见标记的方法。
到目前为止，我发现的所有示例都是基于手动添加标记并将其存储在数组中以供稍后访问的原则，例如：
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});但我没有-我使用getGeoJson()加载整个数据集。
如何根据可使用map.data.forEach()访问的信息来访问标记并对其进行操作(例如，隐藏或显示
-更新
以下是该项目的更多细节。
该映射将标记从客户列表生成的标记。客户具有不同的类别和属性，因此典型的GeoJSON字符串条目形式如下所示：
{"type":"Feature","geometry":{"type":"Point","coordinates":[0,0]},"properties":{"name":"Customer 1","id":"1001","address":"1234 Test Street, Test City, TX 12345, USA","category":"vendor","active":1}}地图上还有一个过滤器框，其中的复选框在默认情况下处于选中状态。单击其中任何一个都将运行过滤代码，该代码应隐藏或删除与匹配该过滤器的任何客户关联的标记。
因此，如果我禁用过滤"inactive“的复选框，那么只有属性为"active":1的客户将保留在地图上。如果禁用筛选“供应商”的复选框，则类别为“供应商”的所有客户都将被隐藏。
稍后再次选中复选框将撤消这些条目的隐藏。
在我的研究中，我发现了很多提到的标记，但只有在手动添加它们的情况下才会出现，而不是通过GeoJSON导入。
我可以看到我的问题的一些潜在解决方案-我可以忽略GeoJSON格式，而是手动将客户列表导入jQuery，并从那里将其解析为标记，然后将其放入一个数组中。但是为什么要使用GeoJSON格式呢？
我目前使用map.data.setStyle() (参见注释)的解决方案似乎可以工作并完成工作。但我很好奇是否有其他更直接的方法。
我认为，过滤器功能将遍历所有数据(map.data.forEach())，以定位基于过滤器应该隐藏的任何项，然后每个项将与其关联的标记通信，该标记需要隐藏。但到目前为止，我还不能弄清楚这种联系。
当我遍历所有特征(map.data.forEach())时，我可以访问我上传的数据，但不能访问作为导入结果放置的标记。
我的问题是，是否有直接从功能访问标记的方法。
我希望这一点现在更清楚了。
-更新
我为它创建了一个非常简单的jsfiddle：
http://jsfiddle.net/semmelbroesel/9bv68ngp/
这是我想要实现的概念，它是按原样工作的。我唯一的问题是，是否有其他方法可以通过直接访问放置的标记来实现相同的结果，而不是使用setStyle()来隐藏/显示它们。
回答 1
Stack Overflow用户
发布于 2015-12-05 10:29:43
您不需要使用forEach，因为setStyle已经遍历了Feature。
如果将样式函数声明为：
map.data.setStyle(function(feature) {
var color = 'FF0000';
var symbol = '%E2%80%A2'; // dot
return /** @type {google.maps.Data.StyleOptions} */ {
visible: feature.getProperty('active'), // this links visibility to feature property
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=' + symbol + '|' + color
};
});您不需要再次调用该方法，因为样式已绑定到feature属性。将active属性设置为false将无缝传播到标记样式。
在那之后，你可以让你的过滤器像(粗略的例子)
var setFilter = function(property, value) {
map.data.forEach(function(feature) {
feature.setProperty('active', feature.getProperty(property) === value);
});
};并调用例如setFilter('name','John');
再一次，这是一个粗略的例子。我宁愿在google.maps.Data原型上实现过滤方法，但这应该会为您指明正确的方向。
https://stackoverflow.com/questions/34092711
复制相似问题