Question

我正在尝试为Google地图上的某些动态标记创建过滤器。用户使用与每个标记类别相关的各种复选框选择来选择他们想要过滤的标记。

我想对我当前的代码提出一些建议，因为我希望我非常接近。我知道这里有很多类似的问题，虽然它们似乎都遵循xml谷歌地图教程，我没有遵循并采用JSON / $ .each路线而不是生成XML和for循环来设置标记位置。

通过阅读相关问题，我尝试创建一个数组，按类别对标记进行分组，然后根据选中的复选框隐藏或取消隐藏这些标记。

目前，当我运行代码时，复选框会在检查时冻结，不要取消选中。当我从html中删除onClick时问题得到解决，尽管这并没有调用该函数。

我收到一个javascript错误，没有定义toggleGroup函数。我不明白为什么它应该由复选框ID定义。

JS

var customIcons = [];
    customIcons["1"] = 'img/32x32/border_edits/Automotive.jpg';
    customIcons["2"] = 'img/32x32/border_edits/BarPub.jpg';
    customIcons["3"] = 'img/32x32/border_edits/Cinema.jpg';

var markerGroups = { 
    "1": [],
    "2": [],
    "3": []
};

$(document).on("pageshow","#map-page",function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success);
    } else {
        error('Geo Location is not supported');
    }

    function success(position) {
        var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var options = {
            zoom: 16,
            center: coords,
            mapTypeControl: false,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            },
            disableDefaultUI:true,
            zoomControl:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map"), options);

        var marker = new google.maps.Marker({
            position: coords,
            icon: 'img/gps_marker.jpg',
            map: map,
        });


        $.post( "getrow.php?getjson", function( data ) {    
            var data = JSON.parse(data);
            console.log(data);
            $.each(data, function(index, value){

                var id = value.site_id;
                var type = value.prime_category;
                var point = new google.maps.LatLng(value.lat, value.lon);
                var name = value.site_name;
                var address = value.site_address;
                var icon = customIcons[type] || {};
                var marker = createMarker(point, name, address, type, id);
            });
        });

        function createMarker(point, name, address, type, id) {
              var marker = new google.maps.Marker({
                  map: map,
                  position: point,
                  icon: customIcons[type],
                  id: id
              });      
              markerGroups[type].push(marker);
              var html = "<b>" + name + "</b> <br/>" + address;
              google.maps.event.addListener(marker, 'click', function() {
                  infoWindow.setContent(html);
                  infoWindow.open(map, marker);

              });
              return marker;
        }

        function toggleGroup(type){
            if($('#'+type).is(':checked')){
                for(var i=0;i<markerGroups[type].length;i++){
                    markerGroups[type][i].setVisible(true);
                }
            }
            else{
                for(var i=0;i<markerGroups[type].length;i++){
                    markerGroups[type][i].setVisible(false);
                }
            }
        }                   
    }
});

HTML

我在jquery移动对话框页面中有复选框，该页面链接在地图页面的标题中

<div data-role="page" id="map-page">
    <div data-role="header" id="appheader" data-position="fixed">
        <h1>
        <a href="#preferences" data-role="button" class="ui-btn-right" data-rel="dialog" data-icon="gear" data-iconpos="notext" data-inline="true"></a> 
        </h1>
    </div>  
    <div id="appcontent">
        <div id="map">
        </div>      
    </div> 
</div>

<div data-role="page" id="preferences">
    <div data-role="header">
    <h1>Filter</h1>
    </div>
    <div data-role="content">
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <label for="1">Automotive</label>
                    <input type="checkbox" id="1" onClick="toggleGroup(this.id)" checked>
                <label for="3">Cinema</label>
                    <input type="checkbox" id="3" onClick="toggleGroup(this.id)" checked>
                <label for="5">Dining Out</label>
                    <input type="checkbox" id="5" onClick="toggleGroup(this.id)" checked>
            </div>
        </div>
    </div>
</div>

CSS

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}

#appcontent{
    width: 100%;
    height: 100%;
}

#map{
    position: absolute;
    top: 40px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#appheader{
    position: absolute;    
    top: 0px;
    left: 0px;
    right: 0px;    
    height: 40px;
    background-color: #00a2e8;
}

非常感谢任何帮助和建议。

Answer 1

我设法解决了这个问题。而不是从html中的每个复选框的onClick调用该函数。我使用$（“：checkbox”）。更改以调用函数并使用this.id来定义标记的类型。感谢@Clayton Leis的建议。

<强> JS

function createMarker(point, name, address, type, id) {
    var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: customIcons[type],
        id: id
    });      
    markerGroups[type].push(marker);
    var html = "<b>" + name + "</b> <br/>" + address;

    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
    return marker;
}

$(":checkbox").change(function toggleGroup(){
    var type = this.id; 
    if($('#'+type).is(':checked')){
        for(var i=0;i<markerGroups[type].length;i++){
            markerGroups[type][i].setVisible(true);
        }
    }
    else{
        for(var i=0;i<markerGroups[type].length;i++){
            markerGroups[type][i].setVisible(false);
        }
    }       
});

我遇到的另一个问题是复选框位于使用html中的jquery mobile的对话框页面上。当页面关闭时，它刷新html，重置复选框。看起来这是jquery mobile中对话框页面的一个众所周知的问题，但是当我将复选框代码放在地图页面中时，上面的代码工作得很好。感谢大家的帮助。

Answer 2

我几个月前制作了类似的复选框。我认为你的代码是对的

你只需要HTML中的内容（你的代码似乎很好）：

<input id="1" type="checkbox" onchange="filterMarkers(this.id)"/>

和javascript。我使用了setVisible（bool），这可能是你的问题：

function filterMarkers(type){
    if($('#'+type).is(':checked')){
        for(var i=0;i<mapMarkers[type].lenght;i++){
            mapMarkers[type][i].setVisible(true);
        }
    }
    else{
        for(var i=0;i<mapMarkers[type].lenght;i++){
            mapMarkers[type][i].setVisible(false);
        }
    }

我假设您正确获取了AJAX调用中的值。通过控制台错误，你可能在那里遇到一些问题。

<小时/> EDIT

您是否曾尝试查看此循环中的值？

var data = JSON.parse(data);
console.log(data);
$.each(data, function(index, value){
    // Do a console.log(value)
    var id = value.site_id;
    var type = value.prime_category;
    var point = new google.maps.LatLng(value.lat, value.lon);
    var name = value.site_name;
    var address = value.site_address;
    var icon = customIcons[type] || {};
    var marker = createMarker(point, name, address, type, id);
});

您声明一个名为'data'的新 var ，与来自该函数的变量相同。这可能是个问题。

使用复选框选择隐藏动态谷歌地图标记

2 个答案: