根据类型属性隐藏/显示某些标记,google maps api v3

时间:2014-03-10 22:02:57

标签: javascript google-maps

我试图在谷歌地图上隐藏/显示标记,具体取决于标记的“类型”。我从JSON获得'type'。我搜索了谷歌文档(纠正我,如果我错了)但似乎他们的例子不起作用,并没有解释如何根据从JSON拉出的属性删除/显示标记。这是他们的例子。 https://developers.google.com/maps/documentation/javascript/examples/marker-remove

我已经根据每种类型使用if语句有不同的标记,但我似乎无法选择隐藏或显示它们。下面我写了我的jquery尝试,但它不起作用。

        var type_1_icon = 'img/icon_1.png';
        var type_2_icon = 'img/icon_2.png';

        this.display_markers = function(){

        downloadUrl ("xml_output.php", function(data) {

        var xml = data.responseXML;

        var markers = xml.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
        var site_name = markers[i] .getAttribute("site_name");
        var site_country = markers[i] .getAttribute("site_country");
        var site_state = markers[i] .getAttribute("site_state");
        var site_desc = markers[i] .getAttribute("site_desc");
        var type = markers[i] .getAttribute("type");
        var site_lat = markers[i] .getAttribute("site_lat");
        var site_lng = markers[i] .getAttribute("site_lng");
        var point = new google.maps.LatLng(
            parseFloat(markers[i] .getAttribute("site_lat")),
            parseFloat(markers[i] .getAttribute("site_lng")));

        var html =  "  /* HTML CONTENT */  ";

        if (type == 'type_1')
        {
            var marker = new google.maps.Marker({
                position: point,
                map: map,
                icon: type_1_icon
            });
        }
        else if (type == 'Type_2')
        {
            var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: type_2_icon
            });
        }
        else
        {
            var markericon ='images/icon_yellow.png';
            var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: markericon
            });
        }

      var hidden_marker = false;

        function toggleGroup(type) {
          for (var i = 0; i < markers[type].length; i++) {
            var marker = markers[type][i];
            if (hidden_marker == true) {
              marker.setMap(map);
              hidden_marker = false;
            } else {
              marker.setMap(null);
              hidden_marker = true;
            }
          }
        }

        // UI Click buttons

        $('#fltr_btn').click(function(){
              toggleGroup('type_1');
        });

    bindInfoWindow(marker, map, InfoWindow, html);

    }
    });

0 个答案:

没有答案