显示隐藏多段线谷歌地图 [英] show hide polylines google maps
本文介绍了显示隐藏多段线谷歌地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当页面加载地图上的所有多段线自动加载。
我需要隐藏它，当我点击chekcbox时它会显示在地图上。我该怎么做？
Polylines有类别..就像人造丝..我把它称为复选框类别人造丝..
对不起，我的英文
它是我的代码：
function getline（）{
var mpenc = new google .maps.InfoWindow（）;
函数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（'加载行..请等待10秒'）;
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 = lines [a] .getAt贡（ complated）;
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 poly = new g.Polyline（{
map：map，
path：pts，
strokeColor：colorr，
strokeWeight：en，
clickable：true
}）;
pinfo（poly，html）;
}
map.fitBounds（bounds）;
}）;
$ b< li><输入类型=复选框id =value1value =wsn /qabala.phponclick =boxclick（this.value，'qabala'，'value1'）/>卡巴拉< /锂>
< li>< input type =checkboxid =value2value =wsn / ismailli.phponclick =boxclick（this.value，'ismailli'，'value2'）/> ;伊斯迈伊里< /锂>
< li>< input type =checkboxid =value3value =wsn / agshu.phponclick =boxclick（this.value，'value3'）/> Aghsu< /锂> ....
和xml数据：
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]
]，
颜色：'＃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] =路径;
div.append（ '< label>< input type =checkboxvalue ='+ name +'/>'+ name +'< / label>）;
}）;
$ b div.on（'change'，'input'，function（event）{
var checked = this.checked;
$。 （类别[this.value]，函数（i）{
this.setVisible（checked）;
}）;
}） ;
}）;
关键是将多段线组合。
When page loaded all polyline autoloaded on map. I m need to hide it and when i click chekcbox it will show on map. how can i do it? Polylines has categories.. like rayon.. i call it on checkbox categories rayon..
P.S. sorry for my English it my code:
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> ....
and xml data:
http://nn-gis.com/map/all.php
解决方案
Do you mean something like this?
$(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);
});
});
});
The key is to group the polylines.
这篇关于显示隐藏多段线谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
