Question

当页面加载所有折线在地图上自动加载时。我需要隐藏它，当我点击chekcbox它将显示在地图上。我该怎么做？折线有类别..像人造丝..我称之为复选框类别人造丝..

P.S。对不起我的英语不好我的代码：

    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> ....

和xml数据：

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

Answer 1

你的意思是这样吗？

http://jsfiddle.net/NCZYW/9/

$(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);

        });

    });

});

关键是对折线进行分组。

显示隐藏折线谷歌地图

1 个答案: