Javascript 显示隐藏多段线谷歌地图

页面加载时，自动加载到地图上的所有多段线。 我需要隐藏它，当我点击复选框时，它会显示在地图上。我怎么做？ 多段线具有多个类别。。像人造丝。。我把它叫做人造丝

对我的英语很抱歉 这是我的代码：

    function getline() {
       var mpenc = new google.maps.InfoWindow();

 function pinfo(poly, html) {


      google.maps.event.addListener(poly,"mouseover",function(){ poly.setOptions({
 strokeColor:'#FFFFFF', strokeOpacity: .8});});

      google.maps.event.addListener(poly,"mouseout",function(){ 
poly.setOptions({strokeColor:colorr});});


     google.maps.event.addListener(poly,'click', function(event) {
    mpenc.setContent(html);
    mpenc.setPosition(event.latLng);
    mpenc.open(map);
  });

}      
 alert('Loading Lines.. Please wait 10 sec.');  
downloadUrl("all.php", function(doc) {
      alert('Lines loaded..');  

      var g = google.maps; 
        var xmlDoc = xmlParse(doc);         bounds = new google.maps.LatLngBounds(); 
      // ========= Now process the polylines ===========
      var lines = xmlDoc.documentElement.getElementsByTagName("line");

      // read each line
      for (var a = 0; a < lines.length; a++) {
        // get any line attributes
       var colour = lines[a].getAttribute("colour");
        var width  = parseFloat(lines[a].getAttribute("width"));
        var diameter = lines[a].getAttribute("diameter");
        var project = lines[a].getAttribute("projectid");       var type = lines[a].getAttribute("type");
        var contract = lines[a].getAttribute("contract");             var cr = lines[a].getAttribute("contractor"); if (cr) {cr1 = "  " + cr + " ";} else { cr1 = "None";}
        var comp = lines[a].getAttribute("complated");
        var id = lines[a].getAttribute("id_line");
        var html = "<b>Contractor:</b> " + cr1 + " </a> <br/> <b> Contract: </b>" + contract + " <br/><b>Line Segment:</b> " + id + " <br/><b>Project: </b>" + project +"<br/>  <b>Diameter: </b>" + diameter + " <br/> <b>Completed: </b>" + comp + "% <hr><br/><a class=\"inline-link-1\" HREF=\"javascript:void(0)\"onclick=\"window.open('cdatal.php?id="+ id +"','cdatal','height=300, width=460,scrollbars=no')\">Change completed</a> <a class=\"inline-link-1\" HREF=\"javascript:void(0)\"onclick=\"window.open('dedit.php?id="+ id +"','cdata','height=300, width=350,scrollbars=no')\">Design data</a>" ;
        // read each point on that line
        var points = lines[a].getElementsByTagName("point");
        var pts = [];
        var length = 0;
        var point = null;
        for (var i = 0; i < points.length; i++) {
           pts[i] = new g.LatLng(parseFloat(points[i].getAttribute("lng")),
                                parseFloat(points[i].getAttribute("lat")));
           if (i > 0) {
             length += pts[i-1].distanceFrom(pts[i]);
             if (isNaN(length)) { alert("["+i+"] length="+length+" segment="+pts[i-1].distanceFrom(pts[i])) };
           }
           bounds.extend(pts[i]);
           point = pts[parseInt(i/2)];
        }
        // length *= 0.000621371192; // miles/meter 


  if (comp < 1) { 
 colorr = '#FA0505' }

 if (comp > 0 && comp < 25 ) { 
 colorr = '#FFA640' }

 if (comp > 24 && comp < 50) { 
 colorr = '#FFFD91' }

 if (comp > 49 && comp < 75) { 
 colorr = '#E8E400' }

 if (comp > 74 && comp < 100) { 
 colorr = '#BFFFAD' }

 if (comp == 100) { 
 colorr = '#0F8500' }
    if(type == 'dl') {en = '1'}     if(type == 'ml') {en = '3'}     if(type == 'tl') {en = '5'}

        var poly = new g.Polyline({
                          map:map,
                          path:pts,
                          strokeColor:colorr,
                          strokeWeight:en,
                          clickable: true
                          });



   pinfo(poly,html);



 }
      map.fitBounds(bounds);

    });


}



 <li><input type="checkbox" id="value1" value="wsn/qabala.php" onclick="boxclick(this.value,'qabala','value1')" /> Qabala</li>
  <li><input type="checkbox" id="value2" value="wsn/ismailli.php"  onclick="boxclick(this.value,'ismailli','value2')" /> Ismayilli</li>
  <li><input type="checkbox" id="value3"  value="wsn/agshu.php"   onclick="boxclick(this.value,'value3')" /> Aghsu</li> ....

---

你是说像这样的事吗

$（函数（）{
var div=$（'类别'）；
var map=new google.maps.map（$（'#map'）.get（0）{
中心：新google.maps.LatLng（0，-180），
缩放：3，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
变量类别={
人造丝：[
{
坐标：[
[37.772323, -122.214897],
[21.291982, -157.821856],
[-18.142599, 178.431],
[-27.46758, 153.027892]
],
颜色：“#FF0000”
}
]
};
$.each（类别、功能（名称）{
var path=[]；新的google.maps.LatLng
$。每个（此，功能（i）{
var路径=[]；
$.each（这是坐标，函数（i）{
push（新的google.maps.LatLng（这个[0]，这个[1]）；
});
path.push（新的google.maps.Polyline({
路径：路径，
strokeColor:this.color，
笔划不透明度：1.0，
冲程重量：2，
可见：假，
地图：地图
}));
});
类别[名称]=路径；
div.append（“”+名称+“”）；
});
div.on（'change'、'input'，函数（事件）{
var checked=此项已检查；
$.each（类别[this.value]，函数（i）{
此设置可见（选中）；
});
});
});

---

关键是对多段线进行分组。

是这样的。但我有10个或更多的类别。。我需要按类别显示隐藏这个不是全部。。是否可能？这样，您可以在每个类别下有多条多段线，并按类别隐藏它们。可以随意添加更多数据来定制它。ooppss..我会将jquery 1.9和编辑我的代码作为您的发送，但不起作用（（好的，由于跨域冲突，JSFIDLE不会起作用（因为您试图从另一个域加载XML。为什么不使用jquery ajax方法？、为什么不使用JSON而不是XML？）是“合同”吗“类别”？我想你可以用我的例子来解决它。我测试了另一个方法。我有一个方法来显示/隐藏标记，它可以成功地工作。我想实现它。不工作（…我测试json但不喜欢（…google.maps.Polyline类有一个setVisible来切换可见性

http://nn-gis.com/map/all.php

$(function() {

    var div = $('#categories');

    var map = new google.maps.Map($('#map').get(0), {
        center: new google.maps.LatLng(0, -180),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var categories = {
        rayon: [
            {
                coordinates: [
                    [37.772323, -122.214897],
                    [21.291982, -157.821856],
                    [-18.142599, 178.431],
                    [-27.46758, 153.027892]
                ],
                color: '#FF0000'
            }
        ]
    };

    $.each(categories, function(name) {

        var paths = [];new google.maps.LatLng

        $.each(this, function(i) {

            var path = [];

            $.each(this.coordinates, function(i) {

                path.push(new google.maps.LatLng(this[0], this[1]));

            });

            paths.push(new google.maps.Polyline({
                path: path,
                strokeColor: this.color,
                strokeOpacity: 1.0,
                strokeWeight: 2,
                visible: false,
                map: map
            }));

        });

        categories[name] = paths;

        div.append('<label><input type="checkbox" value="' + name + '"/> ' + name + '</label>');

    });

    div.on('change', 'input', function(event) {

        var checked = this.checked;

        $.each(categories[this.value], function(i) {

            this.setVisible(checked);

        });

    });

});