显示隐藏折线谷歌地图

show hide polylines google maps

本文关键字：谷歌地图 折线 隐藏 显示      更新时间：2023-09-26

页面加载时所有折线自动加载到地图上。我需要隐藏它，当我点击复选框，它将显示在地图上。我该怎么做呢?折线有类别…像人造丝。我把它叫做复选框分类人造丝..

注:抱歉我的英语不好如果我的代码是:

    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

你的意思是这样吗?

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);
        });
    });
});
关键是对折线进行分组。
相关文章：