折线隐藏不起作用 [英] Polyline Hide not working
本文介绍了折线隐藏不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当页面加载所有行自动加载..任何人都可以建议如何在googlemap中切换多段线？
谢谢。
PS对不起，我的英语
var myCoordsLenght = 6;
var gmarkers = [];
if（gmarkers [i] .mycategory（$ i
$ ==类别）{
if（！gmarkers [i] .getMap（））gmarkers [i] .setMap（map）;
gmarkers [i] .setVisible（true）;
==检查复选框==
document.getElementById（category +box）。checked = true;
}
函数hide（category）{
for（var i = 0; i
gmarkers [i] .setVisible（false）;
}
}
document.getElementById（category +box）。checked = false;
infowindow.close（）;
函数boxwclick（box，category）{
if（box.checked）{
show（category）;
} else {
hide（category）;
$ b函数load（）{
var myOptions = {
zoom：7，
center：new google.maps.LatLng（40.0000，48.0000），
mapTypeControl：true，
mapTypeControlOptions：{
style：google.maps.MapTypeControlStyle.DROPDOWN_MENU
}，
zoomControl ：true，
zoomControlOptions：{
style：google.maps.ZoomControlStyle.SMALL
}，
mapTypeId：google.maps.MapTypeId.HYBRID，
}
map = new google.maps.Map（document.getElementById（map），myOptions）;
var infoWindow = new google.maps.InfoWindow;
$ b downloadUrl（all.php，function（doc）{
alert（'Lines loaded ..'）;
var g = google.maps;
var xmlDoc = xmlParse（doc）; bounds = new google.maps.LatLngBounds（）;
// =========现在处理多段线==== =======
var lines = xmlDoc.documentElement.getElementsByTagName（line）;
//读取每行
（var a = 0; a < lines.length; a ++）{
//获取任何线条属性
var color = lines [a] .getAttribute（color）;
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 = l分级表并[a] .getAttribute（ complated）;
var category = lines [a] .getAttribute（rayon）;
var id = lines [a] .getAttribute（id_line）;
var html =< b>承包商：< / b>+ cr1 +< / a>< br />< b>合同：< / b> +合约+< br />< b>线段：< / b>+ id +< br />< b>项目：< / b> + project +< br />< b>直径：< / b> +直径+< br />< b>完成：< / 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'）\>更改已完成< / a>< a class = \inline-link-1 \HREF = \javascript：void（0）\onclick = \window.open（'dedit.php？id =+ id +'， 'cdata'，'height = 300，width = 350，scrollbars = no'）\>设计数据< / a> ;
//读取该行上的每个点
var points = lines [a] .getElementsByTagName（point）;
var pts = [];
var length = 0;
var point = null;
for（var i = 0; i
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）];
}
//长度* = 0.000621371192; （英里/米）
if（comp< 1）{
colorr ='＃FA0505'}
if（comp> 0 （comp> 24&& comp< 50）{
colorr& comp< 25）{
colorr ='＃FFA640'}
='＃FFFD91'}
if（comp> 49&& comp< 75）{
colorr ='＃E8E400'}
if （comp == 100）{
color< 100）{
colorr ='#BFFFAD'}
（comp> 74& 0F8500'}
if（type =='dl'）{en ='1'} if（type =='ml'）{en ='3'} if（type =='tl'）{en ='5'}
var marker = new g.Polyline（{
map：map，
path：pts，
strokeColor：colorr，
strokeWeight：en，
clickable：true
}）;
marker.mycategory = category;
marker.myname = name;
gmarkers.push（marker）;
bindInfoWindow（marker，map，infoWindow，html）;
}
map.fitBounds（bounds）;
}）;
函数bindInfoWindow（marker，map，infoWindow，html，category）{
google.maps.event.addListener（marker，'click'，function（）{
infoWindow.setContent（html）;
infoWindow.open（map，marker）;
}）;
}
/ **************************************** *********************** /
}
HTML：
< li> < input type =checkboxid =Siyazanboxonclick =boxwclick（this，'Siyazan'）/> <标签>&锡亚赞LT; /标签>< /锂>
XML：
< marker>< line id_line =1color =nullwidth =2diameter =110contract =WWS2contractor =SADE Compagnie Generale de Travaux D'Hydrauliqueprojectid rayon =Siyazantype =dlcoordinations =49.1221079493,41.0833787143; 49.1227564511,41.0838059721; 49.1230700892,41.0839889587; 49.1241003797,41.0845428473>< point lng =41.0833787143=NWSSP-2complated =0 lat =49.1221079493/>< point lng =41.0838059721lat =49.1227564511/>< point lng =41.0839889587lat =49.1230700892/> 49.1241003797/>< / line>< line id_line =2color =nullwidth =2diameter =110contract =WWS2contractor =SADE Compagnie Generale de Travaux D'Hydraulique projectid =NWSSP-2complated =0rayon =Siyazantype =dlcoordinationats =49.1154421711,41.0761833833; 49.1165550376,41.0749755563; 49.1175163898,41.0740599835; 49.1180954926,41.0734165180; 49.1185257918,41.0727815949; 49.11861399 22,41.0726310877; 49.1182901054,41.0724703018>< point lng =41.0761833833lat =49.1154421711/>< point lng =41.0749755563lat =49.1165550376/>< point lng =41.0740599835 lat =49.1175163898/>< point lng =41.0734165180lat =49.1180954926/>< point lng =41.0727815949lat =49.1185257918/>
解决方案
切换折线：
yourPolyLine.setMap（yourMap）;
yourPolyLine.setMap（null）;
By this code i can show and hide markers.. This code does not work with polylines. When page loading all lines automaticly loaded.. Can anyone suggest how to toggle polylines in googlemap?
Thanks.
P.S. Sorry for my English
var myCoordsLenght = 6;
var gmarkers = [];
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
if (!gmarkers[i].getMap()) gmarkers[i].setMap(map);
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(category+"box").checked = true;
}
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
document.getElementById(category+"box").checked = false;
infowindow.close();
}
function boxwclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
}
function load() {
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(40.0000, 48.0000),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.HYBRID,
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
var infoWindow = new google.maps.InfoWindow;
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 category = lines[a].getAttribute("rayon");
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 marker = new g.Polyline({
map:map,
path:pts,
strokeColor:colorr,
strokeWeight:en,
clickable: true
});
marker.mycategory = category;
marker.myname = name;
gmarkers.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
map.fitBounds(bounds);
});
function bindInfoWindow(marker, map, infoWindow, html, category) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
/***************************************************************/
}
HTML:
<li> <input type="checkbox" id="Siyazanbox" onclick="boxwclick(this,'Siyazan')" /> <label>Siyazan</label></li>
XML:
<marker><line id_line="1" colour="null" width="2" diameter="110" contract="WWS2" contractor="SADE Compagnie Generale de Travaux D'Hydraulique" projectid="NWSSP-2" complated="0" rayon="Siyazan" type="dl" coordinats="49.1221079493,41.0833787143;49.1227564511,41.0838059721;49.1230700892,41.0839889587;49.1241003797,41.0845428473"><point lng="41.0833787143" lat="49.1221079493"/><point lng="41.0838059721" lat="49.1227564511"/><point lng="41.0839889587" lat="49.1230700892"/><point lng="41.0845428473" lat="49.1241003797"/></line><line id_line="2" colour="null" width="2" diameter="110" contract="WWS2" contractor="SADE Compagnie Generale de Travaux D'Hydraulique" projectid="NWSSP-2" complated="0" rayon="Siyazan" type="dl" coordinats="49.1154421711,41.0761833833;49.1165550376,41.0749755563;49.1175163898,41.0740599835;49.1180954926,41.0734165180;49.1185257918,41.0727815949;49.1186139922,41.0726310877;49.1182901054,41.0724703018"><point lng="41.0761833833" lat="49.1154421711"/><point lng="41.0749755563" lat="49.1165550376"/><point lng="41.0740599835" lat="49.1175163898"/><point lng="41.0734165180" lat="49.1180954926"/><point lng="41.0727815949" lat="49.1185257918"/><point lng="41.0726310877" lat="49.1186139922"/><point lng="41.0724703018" lat="49.1182901054"/></line><line id_line="3" colour="null" width="2" diameter="110" contract="WWS2" contractor="SADE Compagnie Generale de Travaux D'Hydraulique" projectid="NWSSP-2" complated="0" rayon="Siyazan" type="dl" coordinats="49.1094929100,41.0733611765;49.1099543208,41.0733355826;49.1104145028,41.0733449452"><point lng="41.0733611765" lat="49.1094929100"/><point lng="41.0733355826" lat="49.1099543208"/><point lng="41.0733449452" lat="49.1104145028"/></line><line id_line="4" colour="null" width="2" diameter="110" contract="WWS2" contractor="SADE Compagnie Generale de Travaux D'Hydraulique" projectid="NWSSP-2" complated="0" rayon="Siyazan" type="dl" coordinats="49.1102213081,41.0792663250;49.1096951515,41.0788617355;49.1095352693,41.0787634195;49.1093125815,41.0786383847"><point lng="41.0792663250" lat="49.1102213081"/><point lng="41.0788617355" lat="49.1096951515"/><point lng="41.0787634195" lat="49.1095352693"/><point lng="41.0786383847" lat="49.1093125815"/></line><line id_line="5" colour="null" width="2" diameter="110" contract="WWS2" contractor="SADE Compagnie Generale de Travaux D'Hydraulique" projectid="NWSSP-2" complated="0" rayon="Siyazan" type="dl" coordinats="49.1087112084,41.0777986205;49.1090009844,41.0779000181;49.1091705193,41.0779693910;49.1097055392,41.0782304164"><point lng="41.0777986205" lat="49.1087112084"/><point lng="41.0779000181" lat="49.1090009844"/><point lng="41.0779693910" lat="49.1091705193"/><point lng="41.0782304164" lat="49.1097055392"/></line><line id_line="6" colour="null" width="2" diameter="110" contract="WWS2" contractor="SADE Compagnie Generale de Travaux D'Hydraulique" projectid="NWSSP-2" complated="0" rayon="Siyazan" type="dl" coordinats="49.1110047809,41.0815780616;49.1110894030,41.0814954941;49.1111775916,41.0814095421;49.1114574103,41.0811056406;49.1117100334,41.0808386785;49.1119646593,41.0806189159;49.1121959306,41.0803810984;49.1123847807,41.0802126892;49.1125497290,41.0800566494;49.1126203282,41.0800033545"><point lng="41.0815780616" lat="49.1110047809"/><point lng="41.0814954941" lat="49.1110894030"/><point lng="41.0814095421" lat="49.1111775916"/><point lng="41.0811056406" lat="49.1114574103"/><point lng="41.0808386785" lat="49.1117100334"/><point lng="41.0806189159" lat="49.1119646593"/><point lng="41.0803810984" lat="49.1121959306"/><point lng="41.0802126892" lat="49.1123847807"/><point lng="41.0800566494" lat="49.1125497290"/><point lng="41.0800033545" lat="49.1126203282"/></line>
解决方案
To toggle a polyline:
yourPolyLine.setMap(yourMap);
yourPolyLine.setMap(null);
这篇关于折线隐藏不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
