使用复选框选择隐藏动态Google Map标记

Question

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

我希望对当前代码有所建议，因为我希望自己与我的代码很接近。 我知道这里有很多类似的问题，尽管它们似乎都遵循了我未遵循的xml google map教程，并采用了JSON / $ .each路由，而不是生成XML和for循环来设置标记位置。

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

当前，当我运行代码时，复选框处于选中状态，并且不取消选中状态。 当我从html中删除onClick时，此问题已解决，尽管这并不称为功能。

我收到一个未定义toggleGroup函数的JavaScript错误。 我不明白为什么要由复选框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”）。change来调用该函数，并使用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调用中的值。 由于控制台错误，您可能在那里可能有一些问题。

---

编辑

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

 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); }); 

你宣布一个名为“数据”的新变种 ，同样作为来自该函数的变量。 可能是个问题。