javascript - 根据类别筛选标记

Question

我正在尝试根据类别“ map 版本”过滤标记。在 handleFiles 函数中，我解析了 xlsx 数据，并将其转换为 JSON 格式。下面你可以看到我的结果对象。

result = 
0: Object { ID: "1", Title: "title1", "Status": "Closed", "Map  Version": "2002" }
1: Object { ID: "2", Title: "title2", "Status": "Closed", "Map Version": "2002" }
2: Object { ID: "3", Title: "title3", "Status": "Closed", "Map Version": "2003" }
3: Object { ID: "4", Title: "title4", "Status": "Closed", "Map Version": "2003"}
4: Object { ID: "5", Title: "title5", "Status": "Closed", "Map Version": "2005" }
.
.
.

在函数中我创建了标记并将其放在 map 上。为了过滤标记，我在 handleFiles 函数中添加了一个 filterMarkers 函数，否则我无法访问某些对象。此外，我在 HTML 中创建了一个选择框。如果我点击我的其中一个类别，什么也不会发生。我什至没有收到错误消息。有人可以告诉我我做错了什么吗？

我想这与我的职能范围有关。因为如果我的文档准备就绪，只会识别 xlsx 文件，而不是我选择的类别。

function handleFile(e) {
 //Get the files from Upload control
    var files = e.target.files;
    var i, f;
    var gmarkers = [];

 //Loop through files
    for (i = 0, f = files[i]; i != files.length; ++i) {
        //Loop over files
        //convert data into json format as result object
            });

           //create global infoWindow object
           var infoWindow = new google.maps.InfoWindow();
           var markers = [];
           var i, newMarker;


           //loop over json format 
           for (i = 0, length = result.length; i < length; i++) {
                var data = result[i];
                var category = data["Map Version"];

                latLng = new google.maps.LatLng(parseFloat(data.Latitude), parseFloat(data.Longitude));

                //creating a marker and putting it on the map
                 newMarker = new  google.maps.Marker({
                    position: latLng,
                    category: category,
                    map: map

                });

                gmarkers.push(newMarker);



            //add Closures, pass current marker and current data to anonymus function
            (function(marker, data) {
                // Attaching a click event to the current marker
                google.maps.event.addListener(marker, "click", function(e) {
                    infoWindow.setContent("<h3>" + data.Title + "</h3>" +
                                          "Component: " + data["Component"] + "<br>" +
                                          "Created by: " + data["Created By"] + "<br>" +
                                          "Issue Status: " + data["Issue Status"] + "<br>" + 
                                          "Impact Classification: " + data["Impact Classification"] + "<br>"
                                          );
                    infoWindow.open(map, marker);
                });


             }) (newMarker, data);

           }

           filterMarkers = function (category) {
                console.log(category + "ausgewählt");
                for (i=0; i<newMarker.length; i++) {
                    marker = gmarkers[i];

                    if (marker.category == category || category.length === 0) {
                        marker.setVisible(true);
                    }
                    else {
                        marker.setVisible(false);
                    }
                }
             }
        }
    };
        reader.readAsArrayBuffer(f);
   }


$(document).ready(function(){
  $('#files').change(handleFile);

  });

Answer 1

我认为问题在于标记对象的初始化。

//creating a marker and putting it on the map
newMarker = new  google.maps.Marker({
    position: latLng,
    category: category,
    map: map
});

gmarkers.push(newMarker);

请注意 category 字段未在 MapOptions 字段列表中定义:

https://developers.google.com/maps/documentation/javascript/reference#MapOptions

我相信 API 只是忽略了不应该在 MapOptions 中的字段。您可以在标记初始化后自行添加类别字段。有点像

//creating a marker and putting it on the map
newMarker = new  google.maps.Marker({
    position: latLng,
    map: map
});
newMarker.category = category;

gmarkers.push(newMarker);

您可以在以下答案中看到类似的示例:

https://stackoverflow.com/a/47329280/5140781

此外，在 filterMarkers() 函数中，您有以下循环

for (i=0; i<newMarker.length; i++) {...

我相信您应该使用 gmarkers.length 而不是 newMarker.length 因为 newMarker 在您的代码中不是数组。

希望对您有所帮助!