所以我尝试使用两个下拉菜单过滤标记结果:1)。选择/显示类别一或二。和2)。仅选择/显示事件或非事件。我让事件或非事件可以工作，但第一个下拉菜单无法与另一个一起使用。
<script>
(function() {
var geocoder;
var clusterer;
window.onload = function() {
// Creating a new map
// Create a variable to make the map hover over Manchester upon initialising
var map = new google.maps.LatLng(53.466808, -2.233936);
var mapOptions = {
center: map,
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// end of the JSON script. If this could be referenced as an external resource that might be useful...
};
// the MapOptions variable is finished now
// the map is defined below...
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//var selectDiv = $("#category_panel")[0];
//map.controls[google.maps.ControlPosition.TOP_LEFT].push(selectDiv);
var json = [
{
"title": "One",
"lat": 58.9,
"lng": 15.8,
"description": "this is category Two and nonactive",
"category" : [ "two" ],
"status" : [ "nonactive" ]
},
{
"title": "Two",
"lat": 59.9,
"lng": 10.8,
"description": "This is in category One and is non-active",
"category" : [ "one" ],
"status" : [ "nonactive" ]
},
{
"title": "Three",
"lat": 55.7,
"lng": 12.6,
"description": "this is cateogory one and is active",
"category" : [ "one" ],
"status" : [ "active" ]
},
{
"title": "Four",
"lat": 59.9,
"lng": 10.8,
"description": "this is in category two is and active",
"category" : [ "two" ],
"status" : [ "active" ]
}
];
// Custom marker - Need one for each category
var image = new google.maps.MarkerImage(
'http://i.imgur.com/3YJ8z.png',
new google.maps.Size(19, 25), // size of the image
new google.maps.Point(0, 0) // origin, in this case top-left corner
);
// Creating a global infoWindow object that will be reused by all markers
var infoWindow = new google.maps.InfoWindow();
// Marker Clusterer setup
var mcOptions = {
gridSize : 50,
maxZoom : 15
};
clusterer = new MarkerClusterer(map, [], mcOptions);
var markers = {};
var categoryIcons = {
"one" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=1%7CFF0000%7C000000",
"two" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=2%7C00FFFF%7C000000",
"three" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=3%7CFF00FF%7C000000"
}
var statusIcons = {
"active" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=10%7C00FFFF%7C000000",
"nonactive" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=20%7C00FFFF%7C000000",
}
// Looping through the JSON data
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng),
category = data.category;
status = data.status;
if (category in markers == false) {
markers[category] = [];
}
//adding Status the category
if (status in markers == false) {
markers[status] = [];
}
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position : latLng,
title : data.title,
icon : categoryIcons[data.category],
icon: statusIcons[data.status]
});
markers[category].push(marker);
markers[status].push(marker);
// Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}// END for loop
$("#category").change(function(){
var selected = $(this).val();
clusterer.clearMarkers();
clusterer.addMarkers(markers[selected]);
});
$("#category").change();
$("#categoryAlt").change(function(){
var selected = $(this).val();
clusterer.clearMarkers();
clusterer.addMarkers(markers[selected]);
});
$("#categoryAlt").change();
}// END window.onload
})();
function initialize() {
geocoder = new google.maps.Geocoder();
}
</script>
这是我的 HTML
<div id="category_panel">
category:<select id="category">
<option value="two">one</option>
<option value="one">two</option>
<!--<option value="three">three</option>-->
</select>
Status:<select id="categoryAlt">
<option value="">Nothing</option>
<option value="active">Active</option>
<option value="nonactive">Non-active</option>
</select>
</div>
最佳答案
下拉列表中有错误:值被反转:
Category:<select id="category">
<option value="two">one</option>
<option value="one">two</option>
<!--<option value="three">three</option>-->
</select>
它们应该是:
Category:<select id="category">
<option value="one">one</option>
<option value="two">two</option>
<!--<option value="three">three</option>-->
</select>
出现以下错误:
Uncaught TypeError: Cannot read property 'length' of undefined
由处理程序选择下拉状态Nothing触发
$("#status").change(function() {
var selected = $(this).val();
clusterer.clearMarkers();
clusterer.addMarkers(markers[selected]);
});
$("#status").change();
标记['Nothing']不存在。所以，我把它注释掉了。
从 json 数据中，我们得到包含 4 个两个元素的数组的标记数组。为了正确过滤它，我们必须更改category和status更改处理程序，并使用其他下拉列表中的选择。过滤是根据标题完成的，更好的选择是在位置上(它需要更多的工作):
$("#category").change(function() {
var selected = $(this).val();
var statusSelected = $("#status").val();
clusterer.clearMarkers();
for (var i = 0; i < markers[selected].length; i++) {
for (var j = 0; j < markers[statusSelected].length; j++) {
if (markers[selected][i]['title'] ==
markers[statusSelected][j]['title']) {
clusterer.addMarkers([markers[selected][i]]);
}
}
}
// clusterer.addMarkers(markers[selected]);
});
$("#category").change();
$("#status").change(function() {
var selected = $(this).val();
var categorySelected = $("#category").val();
clusterer.clearMarkers();
for (var i = 0; i < markers[selected].length; i++) {
for (var j = 0; j < markers[categorySelected].length; j++) {
if (markers[selected][i]['title'] ==
markers[categorySelected][j]['title']) {
clusterer.addMarkers([markers[selected][i]]);
}
}
}
//clusterer.addMarkers(markers[selected]);
});
$("#status").change();
更改的代码位于 jsbin example 。 注意:它在那里不起作用，因为没有 markclusterer.js 文件的有效链接。
顺便说一句，我永远不会这样设计。我只会构建一个标记列表，其中包含有关状态和类别的信息，这些信息可以一次性过滤掉。
更新:回复@Freddie评论
我没有写任何东西，但它会像下面这样。 MarkerInfo 对象包含有关创建的标记的信息:
function MarkerInfo(marker, status, category) {
this.marker = marker;
this.status = status;
this.category = category;
}
markerList 数组包含创建的 MarkerInfo 列表(初始化时为空，最后长度应与标记数相同):
var markerList = [];
如何填写:
for/while reading from json
read data for new marker (location, status, category...)
create marker
var markerInfo = new MarkerInfo(marker, status, category);
markerList.push(markerInfo);
$("#category").change(function() {...}) 和 $("#status").change(function() {... }) 可以用一个循环过滤掉标记。
类似的事情。
关于javascript - 谷歌地图 APIV3 - 多个下拉类别/过滤标记结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21691646/