Google地图V3 - 如果json字段具有特定值,则从引脚列表中排除位置

时间:2016-12-12 23:34:26

标签: javascript jquery json google-maps google-maps-api-3

我有一个从外部JSON文件解析数据的ajax调用。返回对象中的一个键是show_on_map。如果该密钥的值为0,我需要将其从Google地图图钉列表中排除。

这是我的谷歌地图脚本(对不起,它很长):

var map;

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52.4357808, 4.991315699999973),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

var seg = {
    1: 'invesCastProd',
    2: 'forged',
    3: 'airframe',
    5: 'corp',
    6: 'structurals'
}

var comp = {
    1: 'structurals',
    2: 'airfoils',
    3: 'airfoils',
    4: 'wyman',
    5: 'energy',
    6: 'strucComp',
    7: 'mechHard',
    8: 'engineProd',
    9: 'corp',
    10: 'aero',
    12: 'timet',
    13: 'specMetals'
}

$(document).ready(function(){
    var myJSON = {};
    var myMarkers=[];

    $.getJSON("/pcc-common/static/pcc-locations.json", function(json1) {
        myJSON=json1;
        $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.latitude, data.longitude);
            var marker = new google.maps.Marker({
                position: latLng
            });
            myMarkers[key]=marker;
            marker.setMap(map);

            var infoWindow = new google.maps.InfoWindow();

            google.maps.event.addListener(marker, 'click', function() {

                if (infoWindow) {infoWindow.close();}
                infoWindow = new google.maps.InfoWindow({
                    content: "<h5>" + data.display_name + "</h5>" +
                    "<div>" + data.street+ "</div>" +
                    "<div>" + data.city + ", " + data.state + " &nbsp; " + data.postal_code + "</div>" +
                    "<div class='mapPhoneNum'>" + data.telephone + "</div>" +
                    "<a href=" + data.web_url + ">Website</a>"
                });
                infoWindow.open(map, marker);
                map.setZoom(15);
                map.panTo(this.getPosition());

                google.maps.event.addListener(infoWindow,'closeclick',function(){
                  resetMapOrigin();
                });

            });

            filterMarkers = function(category){

                var component = category.data("component_id");
                var segment = category.data("segment_id")

                setMapOnAll(null);
                resetMapOrigin();

                var filteredMarkers=[];

                $.each(myJSON, function(key, data) {


                    if( typeof(component)!="undefined" ){

                      if( (myJSON[key].component_id == component) && (myJSON[key].segment_id == segment) ){ 
                        filteredMarkers.push(key);
                      }

                    }else{
                      if( myJSON[key].segment_id == segment ){
                        filteredMarkers.push(key);
                      }
                    }
                });

                for(i=0;i<filteredMarkers.length;i++){
                    myMarkers[filteredMarkers[i]].setMap(map);
                }
            }

            function setMapOnAll(map) {
                for (var i = 0; i < myMarkers.length; i++) {
                    myMarkers[i].setMap(map);
                }
            }

            function resetMapOrigin(){
              map.setZoom(2);
              map.setCenter({lat:52.4357808,lng:4.991315699999973});
            }
        });
    });
});

以下是返回的示例:

[
  {
    "id" : 2,
    "display_name" : "PCC Structurals Division Headquarters",
    "full_address" : "9200 SE Sunnybrook, Suite 240; Clackamas, OR  97015",
    "latitude" : 45.43,
    "longitude" : -122.569,
    "telephone" : "503-777-3881\r\n",
    "web_url" : "http://www.pccstructurals.com/",
    "created_at" : "2011-06-08 16:40:13",
    "segment_id" : 1,
    "component_id" : 1,
    "region_id" : 10,
    "street" : "9200 SE Sunnybrook Drive",
    "city" : "Portland",
    "state" : "OR",
    "country" : "US",
    "postal_code" : "97015",
    "employees" : 0,
    "blurb" : null,
    "manufacturing_locations" : 0,
    "other_locations" : 0,
    "show_on_map" : 1,
    "contact_info" : null,
    "component_type_id" : null,
    "sales_telephone" : null
  },
  {
    "id" : 3,
    "display_name" : "AlloyWorks, LLC",
    "full_address" : "Salisbury, North Carolina 28144\r\n",
    "latitude" : 35.6735,
    "longitude" : -80.4774,
    "telephone" : "704-645-0511\r\n",
    "web_url" : "",
    "created_at" : "2011-08-15 14:02:24",
    "segment_id" : 1,
    "component_id" : 1,
    "region_id" : 13,
    "street" : "814 West Innes Street",
    "city" : "Salisbury",
    "state" : "NC",
    "country" : "US",
    "postal_code" : "28144",
    "employees" : null,
    "blurb" : null,
    "manufacturing_locations" : 0,
    "other_locations" : 0,
    "show_on_map" : 0,
    "contact_info" : null,
    "component_type_id" : null,
    "sales_telephone" : null
  }
]

如您所见,第二个对象有"show_on_map" : 0。我需要从地图引脚中排除这些。我怎么能这样做?

由于

1 个答案:

答案 0 :(得分:1)

您可以在数据上使用filter函数 - 例如

json = [{foo:1, show_on_map:1},{foo:2, show_on_map:0}];
filtered = json.filter(function(k) {return k.show_on_map ==1;})
console.log(filtered);