Question

我正在尝试根据类别过滤标记＆＃34; map Version＆＃34;。在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" }
.
.
.

在我创建标记的功能中，将其放在地图上。为了过滤标记，我在filterMarkers函数中添加了handleFiles个函数，否则我无法访问某些对象。另外，我在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);

请注意，MapOptions字段列表中未定义category字段：

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不是代码中的数组。

我希望这有帮助！

根据类别过滤标记

1 个答案: