通过此代码,我可以显示和隐藏标记。此代码不适用于折线。当页面加载所有行时自动加载.. 谁能建议如何在 googlemap 中切换折线?
谢谢。
PS对不起我的英语
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>