Google地图 - 复选框中的多个标记

时间:2014-05-23 15:52:53

标签: javascript jquery google-maps

我的Google Maps javascript代码出现问题。 我是一个新手,并且认为我有一个游戏,我拼凑了来自几个不同来源的代码来形成这个:

var map;
    var markers = [];
    var lastinfowindow;
    var locIndex;

    if ( !Array.prototype.forEach ) {
      Array.prototype.forEach = function(fn, scope) {
        for(var i = 0, len = this.length; i < len; ++i) {
          fn.call(scope, this[i], i, this);
        }
      }
    }

    var data = [
    {address:'5-7 Knowsley St Bolton BL1 2AQ',title:'McDonalds',type:'mcdonalds'},
    {address:'Waters Meeting Rd Bolton BL1 8TT',title:'McDonalds',type:'mcdonalds'},
    {address:'1011 Chorley Old Rd Bolton BL1 5SX',title:'McDonalds',type:'mcdonalds'},
    {address:'93 Derby St Bolton BL3 6HH',title:'McDonalds',type:'mcdonalds'},
    {address:'Middlebrook Retail Park Horwich Bolton BL6 6JA',title:'McDonalds',type:'mcdonalds'},
    {address:'Springfield Bolton BL2 1HY',title:'Burger King',type:'burgerKing'},
    {address:'85 Derby St Bolton BL3 6HE',title:'KFC',type:'kfc'},
    {address:'The Linkway Horwich Bolton BL6 6JA',title:'KFC',type:'kfc'},
    {address:'Waters Meeting Road The Valley Bolton BL1 8TT',title:'KFC',type:'kfc'},
    {address:'Middlebrook Retail Park Horwich Bolton BL6 6JA',title:'Subway',type:'subway'},
    {address:'46A Newport St Bolton BL1 1NB',title:'Subway',type:'subway'},
    {address:'Unit 4C Burnden Park Manchester Rd Bolton BL3 2QS',title:'Subway',type:'subway'},
    {address:'Bolton Gate Retail Park Turton St Bolton BL1 2EX',title:'Pizza Hut',type:'pizzaHut'},
    {address:'Middlebrook Retail Park Horwich Bolton BL6 6JA',title:'Pizza Hut',type:'pizzaHut'},
    {address:'39 Derby St Bolton BL3 6HE',title:'Dominos Pizza',type:'dominos'},
    {address:'Unit 5B Oxford St Bolton BL1 1RD',title:'Costa',type:'costa'},
    {address:'32-36 Deansgate Bolton BL1 1BL',title:'Costa',type:'costa'},
    {address:'Market St Bolton BL1 2AR',title:'Costa',type:'costa'},
    {address:'Market Hall Bolton, Lancashire BL1 2AR',title:'Starbucks',type:'starbucks'}
    ];

    function getIcon(type) {

        switch(type) {
            case "mcdonalds": return "images/icons/mcdonalds.png";
            case "burgerKing": return "images/icons/burgerKing.png";
            case "pizzaHut": return "images/icons/pizzaHut.png";
            case "dominos": return "images/icons/dominos.png";
            case "subway": return "images/icons/subway.png";
            case "kfc": return "images/icons/kfc.png";
            case "starbucks": return "images/icons/starbucks.png";
            case "costa": return "images/icons/costa.png";
            default: return "images/icons/default.png";
        }
    }

    function initialize() {
        var latlng = new google.maps.LatLng(53.584526, -2.429134);
        var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        geocoder = new google.maps.Geocoder();

        data.forEach(function(mapData,idx) {
            geocoder.geocode( { 'address': mapData.address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var marker = new google.maps.Marker({
                            map: map,
                            draggable:true,
                            animation: google.maps.Animation.DROP, 
                            position: results[0].geometry.location,
                            title: mapData.title,
                            icon: getIcon(mapData.type)
                        });



                        var contentHtml = "<div style='width:300px;height:100px'><h3>"+mapData.title+"</h3>"+mapData.address+"<p></div>";
                        var infowindow = new google.maps.InfoWindow({
                            content: contentHtml
                        });

                        google.maps.event.addListener(marker, 'click', function() {
                          infowindow.open(map,marker);
                        });

                        marker.locid = idx+1;
                        marker.infowindow = infowindow;
                        markers[markers.length] = marker;

                        var sideHtml = '<p class="loc" data-locid="'+marker.locid+'"><b>'+mapData.title+'</b><br/>';

                             sideHtml += mapData.address + '</p>';

                             $("#locs").append(sideHtml); 

                        if(markers.length == data.length) doFilter();

                    } else {

                    }
                });
        });

        $(document).on("click",".loc",function() {
            var thisloc = $(this).data("locid");
            for(var i=0; i<markers.length; i++) {
                if(markers[i].locid == thisloc) {

                    if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
                    map.panTo(markers[i].getPosition());
                    markers[i].infowindow.open(map, markers[i]);
                    lastinfowindow = markers[i].infowindow;
                }
            }
        });


        function doFilter() {
            if(!locIndex) {
                locIndex = {};
                for(var x=0, len=markers.length; x<len; x++) {
                    locIndex[markers[x].locid] = x;
                }
            }

            var checked = $("input[type=checkbox]:checked");
            var selTypes = [];
            for(var i=0, len=checked.length; i<len; i++) {
                selTypes.push($(checked[i]).val());
            }

            for(var i=0, len=data.length; i<len; i++) {
                var sideDom = "p.loc[data-locid="+(i+1)+"]";

                if(checked.length !=0 && selTypes.indexOf(data[i].type) < 0) {
                    $(sideDom).hide();
                    markers[locIndex[i+1]].setVisible(false);
                } else {
                    $(sideDom).show();
                    markers[locIndex[i+1]].setVisible(true);
                }
            }
        }

        $(document).on("click", "input[type=checkbox]", doFilter);
    }

基本上,它没有正常运作。 我希望它在加载时不显示任何标记,然后仅显示用户通过页面上选中的复选框选择的标记。我的几个复选框都不起作用,偶尔点击一个复选框,它们全部显示或者根本不显示:( 我有没有明显的错误? 有人能指出我正确的方向吗?

0 个答案:

没有答案