javascript - 谷歌地图 APIV3 - 多个下拉类别/过滤标记结果

Question

所以我尝试使用两个下拉菜单过滤标记结果: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>

Answer 1

下拉列表中有错误:值被反转:

    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() {... }) 可以用一个循环过滤掉标记。

类似的事情。