按类别显示/隐藏谷歌标记和折线，带有复选框答案

【问题标题】：Show/hide google markers and polylines by category, with checkboxes按类别显示/隐藏谷歌标记和折线，带有复选框
【发布时间】：2013-11-11 14:55:54
【问题描述】：

我想在一些复选框的帮助下按类别隐藏/显示 Google 地图标记和折线。我查看了其他示例，但我发现的其他示例具有完全不同的代码，因此，作为 javascript 菜鸟，我无法满足我的目的。

我的代码如下所示：

我有一个包含我的职位和一些自定义数据的数组对象（对吗？）：

var nodes = {
'node1': {
    'name': 'Node 1',
    'description': 'Description of Node 1',
    'category': 'internal-node',
    'icon': '../graphics/map-marker.png',
    'labelposition':  new google.maps.Size(0, 5),
    'lat': 55.57411194,
    'long': 12.92872047000003},
'node2': {
    'name': 'Node 2',
    'description': 'Description of Node 2',
    'category': 'external-node',
    'icon': '../graphics/map-marker.png',
    'labelposition':  new google.maps.Size(-145, -30),
    'lat': 55.57440186,
    'long': 12.928360939999948},
};

我在每个循环中使用 jquery 循环遍历这些，并为每个循环添加一个标记。使用此代码：

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(obj.lat, obj.long),
   animation : google.maps.Animation.DROP,
   icon: obj.icon,
   customInfo: obj.info,
   category: obj.category,
   map: map,
   visible: true,
   title: obj.name,
});

我引用了对象的类别。所以现在每个标记都应该有一个类别。我还为我的折线设置了一些路径，以便在我的位置之间移动。使用此代码：

var mainRoutes = [
    ["node1", "node2"],
];

function drawMainRoutes() {
    // Create traffic mainRoutes
    for(var i=0, l=mainRoutes.length; i < l; i++){
        list = mainRoutes[i];
        var paths = [];
        for(var j=0, k=list.length; j < k; j++){
            var obj = nodes[list[j]];
            paths.push(new google.maps.LatLng(obj.lat, obj.long));
        };

        // Draw polyline mainRoutes
        var path = new google.maps.Polyline({
            path: paths,
            geodesic: false,
            strokeColor: '#FFFFFF',
            strokeOpacity: 0.8,
            strokeWeight: 2
        });
        path.setMap(map)
    };
}

drawMainRoutes();

我还创建了两个复选框来控制我的两个类别：

<label><input type="checkbox" id="internal-nodes">Internal nodes/paths</label>
<label><input type="checkbox" id="external nodes">External nodes/paths</label>

那么，如果我想在复选框的帮助下按类别控制标记/节点的可见性，我该如何从这里开始？

【问题讨论】：

您可以将您的谷歌标记推送到数组或一些对象集合。当你需要隐藏它们时，只需从集合中获取需要的标记，并为地图属性设置null，通过诗句你可以显示需要的标记。
您能否帮我开始一些代码帮助？不知道该怎么做。
请看我的回答...

标签： google-maps google-maps-api-3 checkbox show-hide categories

【解决方案1】：

遍历您的 JSON 对象，并根据类别和选中/取消选中的框，对它们使用 .setVisible(true/false)。

【讨论】：

【解决方案2】：

这是一些抽象的例子，但我认为这将有助于开始：

var map = {
    map: {},
    markers: {},
    init: function(){
        var curLatLng = new google.maps.LatLng(50.422956, 30.535759);
        var mapOptions = {
            zoom: 15,
            minZoom: 13,
            maxZoom: 18,
            center: currentLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            scrollwheel: false
        };
        this.map = new google.maps.Map(document.getElementById('map-container'), mapOptions);
    },
    hideMarkers: function(){
        for(var i = 0; i < this.markers.length; i++);{
              this.marker.setMap(null);
        }
    },
    showMarkers: function(){
        for(var i = 0; i < this.markers.length; i++){
            this.marker.setMap(this.map);
        }
    }
};
map.init();
var markers = {};
for(var i = 0; i < nodes.length; i++){
    markers[i] = new google.maps.Marker({
        position: new google.maps.LatLng('some latitude from node', 'some longitude from node'),
        map: map.map,
        name: 'some name from node',
        category: 'come category'
    });
    google.maps.event.addListener(markers[i], "click", function(){
        //some action
    });
}
map.markers = markers;

【讨论】：