0
我想切換/關閉自定義圖例（＃skybox2），但我無法弄清楚如何開始做這件事。我希望它打開，然後可以選擇將其切換爲按鈕。任何幫助是極大的讚賞。我附上我的完整代碼。謝謝。切換自定義圖例Google地圖Javascript
<html>
<head>
<title>Web Map of WVDRS Offices</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body{overflow:hidden;margin:1; padding:0;}
#map_canvas {
height:100%;
width:100%;
}
h3{
margin-top: 0;
}
h4{
margin-top: 0;
font-weight: bold;
}
#skybox1 {
width:100%;
background-color: #222;
border-style: solid;
border-color: #222;
border-radius: 0px;
color: #eee;
padding: 0%;
}
.toplinks {
float:right;
font-style:normal;
margin-right:0.5em;
}
#skybox2 {
width: auto;
height: auto;
background-color: #222;
border-style: solid;
border-color:#222;
border-radius: 20px;
color: #eee;
padding: 0 0.4em;
position: absolute;
z-index: 100;
bottom: 15px;
right: 10px;
}
#skybox2 {
position: relative
background-color:222;
}
.color {
border: 1px solid;
border-color:#222;
height: 20px;
width: 20px;
margin-right: 0.2em;
float: left;
}
.blue {
background: #cfe2f3;
}
.yellow {
background: #ffff00;
}
.brown {
background: #bf9000;
}
.purple {
background: #674ea7;
}
.pink {
background: #ea9999;
}
.green {
background: #6aa84f;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js? sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(38.763853,-80.310059);
var mapOptions = {
zoom: 8,
center: myLatlng,
disableDefaultUI: false,
mapTypeControl:false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
panControl:true,
panControlOptions:{
position:google.maps.ControlPosition.DEFAULT
},
zoomControl: true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.DEFAULT
},
scaleControl:false,
streetViewControl:true,
rotateControl:false,
overviewMapControl:false,
mapTypeId: google.maps.MapTypeId.ROAD,
styles: [
{
featureType: 'all',
elementType:"",
stylers: [
{hue:""},
{saturation:-100},
{lightness:""},
{gamma:""}
]
},{
featureType: 'poi.park',
elementType:"labels",
stylers:[
{visibility:"off"}
]
}
]
}
county = new google.maps.FusionTablesLayer({
map: map,
heatmap: {enabled: false},
query: {
select: "col2",
from: "1LFQlSRds4LnGpf16wF2d-srEBdICE3A0F6aFFIYi",
where: ""
},
options: {
styleId: 2,
templateId: 3
}
});
district = new google.maps.FusionTablesLayer({
map: map,
heatmap: {enabled: false},
query: {
select: "col2",
from: "1lugoG8PloQQWVec_3jnK9B_dlbkOA5Tz1lL2iI_d",
where: ""
},
options: {
styleId: 2,
templateId: 3,
},
styles: [{
polygonOptions: {
fillOpacity: 0.4,
strokeColor:"",
strokeWeight:""
}
}]
});
state = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col0",
from: "18_J2uuiZRLon48Lc6bclZ0ckHanbKZB9qg319KV3",
where: "col2 \x3d 30"
},
options: {
styleId: 2,
templateId: 2
},
});
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions) ;
district.setMap(map);
state.setMap(map);
lats = new Array (38.321099,38.4579809,38.801414,38.843651,38.819064,39.28549,39.4848327,39.627854,39.018054,38.939379,40.065522,39.26451,40.401822,39.564031,37.790201,37.359695,37.828694,38.304694,38.401603,37.847892,37.584749,39.496909,39.401623,39.3356127,37.415833,38.014136,39.070254,38.423697,38.4282422,38.393772);
longs = new Array (-81.581721,-81.931094,-81.351222,-82.138137,-81.722606,-80.270051,-80.1418304,-79.930129,-80.421569,-79.856733,-80.722743,-81.559587,-80.587742,-80.996412,-81.190381,-81.096182,-80.420059,-80.830412,-82.492229,-81.993212,-81.381419,-77.954339,-79.015217,-78.7457004,-81.589306,-81.125976,-78.938935,-82.427279,-82.2071357,-82.3990836);
hovertitle = new Array ("Charleston WVDRS","Teays Valley WVDRS","Spencer WVDRS","Point Pleasant WVDRS","Ripley WVDRS","Clarksburg WVDRS","Fairmont WVDRS","Morgantown WVDRS","Weston WVDRS","Elkins WVDRS","Wheeling WVDRS","Parkersburg WVDRS","Weirton WVDRS","Sistersville WVDRS","Beckley WVDRS","Princeton WVDRS","Lewisburg WVDRS","Summersville WVDRS","Huntington WVDRS","Logan WVDRS","Mullens WVDRS","Martinsburg WVDRS","Keyser WVDRS","Romney WVDRS","Welch WVDRS","Oak Hill WVDRS","Moorefield WVDRS","Marshall University WVDRS","Cabell Midland H.S. WVDRS","Huntington H.S. WVDRS");
htmlAll = new Array ("<h4>Charleston WVDRS</h4><img src=offices/Charleston.png width=200 height=150><p>4701 MacCorkle Avenue SE<br>Charleston, WV 25304<br>304-356-2371(Phone)<br>304-926-1710(Fax)</p><a href=directions/Charleston.html>Get Directions</a>",
"<h4>Teays Valley WVDRS</h4><img src=offices/TeaysValley.png width=200 height=150><p>115 Liberty Square<br>Hurricane, WV 25526<br>304-760-7082(Phone)<br>304-759-0267(Fax)</p><a href=directions/TeaysValley.html>Get Directions</a>",
"<h4>Spencer WVDRS</h4><img src=offices/Spencer.png width=200 height=150><p>321 Market Street<br>Spencer, WV 25276<br>304-927-0954(Phone)<br>304-927-0955(Fax)</p><a href=directions/Spencer.html>Get Directions</a>",
"<h4>Point Pleasant WVDRS</h4><img src=offices/PointPleasant.png width=200 height=150><p>209 5th Street<br>Point Pleasant, WV 25550<br>304-675-0867(Phone)<br>304-675-0882(Fax)</p><a href=directions/PointPleasant.html>Get Directions</a>",
"<h4>Ripley WVDRS</h4><img src=offices/Ripley.png width=200 height=150><p>206 Stone Drive<br>Ripley, WV 25271<br>304-373-0313(Phone)<br>304-373-0116(Fax)</p><a href=directions/Ripley.html>Get Directions</a>",
"<h4>Clarksburg WVDRS</h4><img src=offices/Clarksburg.png width=200 height=150><p>107 Cambridge Place<br>Bridgeport, WV 26330<br>304-842-2951(Phone)<br>304-842-4826(Fax)</p><a href=directions/Clarksburg.html>Get Directions</a>",
"<h4>Fairmont WVDRS</h4><img src=offices/Fairmont.png width=200 height=150><p>Veterans Square<br>320 Adams Street, Suite 106<br>Fairmont, WV 26554<br>304-367-2714(Phone)<br>304-367-2716(Fax)</p><a href=directions/Fairmont.html>Get Directions</a>",
"<h4>Morgantown WVDRS</h4><img src=offices/Morgantown1.png width=200 height =150><p>1415 Earl Core Road<br>Morgantown, WV 26505<br>304-285-3155(Phone)<br>304-285-3158(Fax)</p><a href=directions/Morgantown.html>Get Directions</a>",
"<h4>Weston WVDRS</h4><img src=offices/Weston.png width=200 height =150><p>306 Market Place Mall<br>Weston, WV 26451<br>304-269-0547(Phone)<br>304-269-0427(Fax)</p><a href=directions/Weston.html>Get Directions</a>",
"<h4>Elkins WVDRS</h4><img src=offices/Elkins.png width=200 height =150><p>1025 North Randolph Avenue<br>Elkins, WV 26241<br>304-637-0205(Phone)<br>304-637-0209(Fax)</p><a href=directions/Elkins.html>Get Directions</a>",
"<h4>Wheeling WVDRS</h4><img src=offices/Wheeling1.png width=200 height=150><p>Central Union Building<br>40 14th Street, Suite 103<br>Wheeling, WV 26003<br>304-238-1093(Phone)<br>304-238-1096(Fax)</p><a href=directions/Wheeling.html>Get Directions</a>",
"<h4>Parkersburg WVDRS</h4><img src=offices/Parkersburg.png width=200 height=150><p>State Office Building<br>400 5th Street<br>Parkersburg, WV 26101<br>304-420-4580(Phone)<br>304-420-4583(Fax)</p><a href=directions/Parkersburg.html>Get Directions</a>",
"<h4>Weirton WVDRS</h4><img src=offices/Weirton1.png width=200 height=150><p>100 Municipal Plaza, Suite 200<br>Weirton, WV 26062<br>304-723-5311(Phone)<br>304-723-5318(Fax)</p><a href=directions/Weirton.html>Get Directions</a>",
"<h4>Sistersville WVDRS</h4><img src=offices/Sistersville.png width=200 height=150><br>714 Wells Street<br>Sistersville, WV 26175<br>304-652-2354(Phone)<br>304-652-2359(Fax)<br><br><a href=directions/Sistersville.html>Get Directions</a>",
"<h4>Beckley WVDRS</h4><img src=offices/Beckley.png width=200 height=150><p>800 New River Town Center<br>Beckley, WV 25801<br>304-256-6900(Phone)<br>304-256-6903(Fax)</p><a href=directions/Beckley.html>Get Directions</a>",
"<h4>Princeton WVDRS</h4><img src=offices/Princeton.png width=200 height=150><p>195 Davis Street<br>Princeton, WV 24739<br>304-425-1256(Phone)<br>304-487-2631(Fax)</p><a href=directions/Princeton.html>Get Directions</a>",
"<h4>Lewisburg WVDRS</h4><img src=offices/Lewisburg1.png width=200 height=150><p>777 N Jefferson Street, Suite 105<br>Lewisburg, WV 24901<br>304-647-7515(Phone)<br>304-647-7518(Fax)</p><a href=directions/Lewisburg.html>Get Directions</a>",
"<h4>Summersville WVDRS</h4><img src=offices/Summersville.png width=200 height=150><p>830 Northside Drive, Suite 113<br>Summersville, WV 26651<br>304-872-0813(Phone)<br>304-872-0518(Fax)</p><a href=directions/Summersville.html>Get Directions</a>",
"<h4>Huntington WVDRS</h4><img src=offices/Huntington.png width=200 height=150><p>2699 Park Avenue, Suite 200<br>Huntington, WV 25704<br>304-528-5585(Phone)<br>304-528-5591(Fax)</p><a href=directions/Huntington.html>Get Directions</a>",
"<h4>Logan WVDRS</h4><img src=offices/Logan.jpg width=200 height=150><p>130 Stratton Street<br>Logan, WV 25601<br>304-792-7060(Phone)<br>304-792-7062(Fax)</p><a href=directions/Logan.html>Get Directions</a>",
"<h4>Mullens WVDRS</h4><img src=offices/Mullens.png width=200 height=150><p>316 Howard Avenue<br>Mullens,WV 25882<br>304-294-5653(Phone)<br>304-294-5655(Fax)</p><a href=directions/Mullens.html>Get Directions</a>",
"<h4>Martinsburg WVDRS</h4><img src=offices/Martinsburg.png width=200 height=150><p>489 Mid Atlantic Parkway, Suite 2<br>Martinsburg, WV 25404<br>304-267-0005(Phone)<br>304-267-0007(Fax)</p><a href=directions/Martinsburg.html>Get Directions</a>",
"<h4>Keyser WVDRS</h4><img src=offices/Keyser.png width=200 height=150><p>67 North Tornado Way<br>Keyser, WV 26726<br>304-788-2313(Phone)<br>304-788-6389(Fax)</p><a href=directions/Keyser.html>Get Directions</a>",
"<h4>Romney WVDRS</h4><img src=offices/Romney.jpg width=200 height=150><p>24948 Northwestern Pike<br>Romney, WV 26757<br>304-822-3957<br>304-822-7417</p><a href=directions/Romney.html>Get Directions</a>",
"<h4>Welch WVDRS</h4><img src=offices/Welch.png width=200 height=150><p>110 Park Avenue<br>Welch, WV 24801<br>304-436-3175(Phone)<br>304-436-3176(Fax)</p><a href=directions/Welch.html>Get Directions</a>",
"<h4>Oak Hill WVDRS</h4><img src=offices/OakHill1.png width=200 height=150><p>549 Mall Road<br>Oak Hill, WV 25901<br>304-465-3025(Phone)<br>304-465-3069(Fax)</p><a href=directions/OakHill.html>Get Directions</a>",
"<h4>Moorefield WVDRS</h4><img src=offices/Moorefield.jpg width=200 height=150><p>151 Robert C. Byrd<br>Industrial Park Road, Suite 3<br>Moorefield, WV 26836<br>304-538-2701(Phone)<br>304-538-2718(Fax)</p><a href=directions/Moorefield.html>Get Directions</a>",
"<h4>Marshall University WVDRS</h4><img src=offices/MarshallU.png width=200 height=150><p>Prichard Hall, Room 113<br>Huntington, WV 25755<br>304-696-2394(Phone)</p><a href=directions/MarshallUniversity.html>Get Directions</a>",
"<h4>Cabell Midland H.S. WVDRS</h4><img src=offices/CabellMidland.png width=200 height=150><p>2300 US Route 60 East<br>Ona, WV 25545<br>304-743-7496(Phone)</p><a href=directions/CabellMidland.html>Get Directions</a>",
"<h4>Huntington H.S. WVDRS</h4><img src=offices/HuntingtonHigh.png width=200 height=150><p>1 Highlander Way<br>Huntington, WV 25701<br>304-528-6511(Phone)</p><a href=directions/HuntingtonHS.html>Get Directions</a>");
markers = new Array();
for (var i = 0; i < 40; i++) {
myLatlng = new google.maps.LatLng(lats[i],longs[i]);
var contentString = htmlAll[i];
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
html: htmlAll[i],
title: hovertitle[i]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
}}
</script>
<body onLoad="initialize();">
<div id="skybox1">
<img src=offices/DRSlogo.png align=left width=60 height=60><strong><font size="6">West Virginia Division of Rehabilitation Services</font></strong>
<br>
<font size="5"> Field Offices</font><br>
<font size="3"><i>Click a marker on the map for office information.<br>
<span class="toplinks">
<a href="http://wvdrs.org/" style="color:white">WVDRS Home</a>
<a href="http://wvdrs.org/data/DRS_Location_Map_2014.pdf" style="color:white">Text-Only</a>
</span>Click elsewhere on the map to get county and WVDRS District information.</i></font>
</div>
<div id="skybox2">
<!--<h3>WVDRS Districts<h3>-->
<p><img src="map-pin.png" width="25" height="40" alt="map pin marker">DRS office</p>
<div class="color blue"></div><p><font size="4">District 1</font></p>
<div class="color yellow"></div><p><font size="4">District 2</font></p>
<div class="color brown"></div><p><font size="4">District 3</font></p>
<div class="color purple"></div><p><font size="4">District 4</font></p>
<div class="color pink"></div><p><font size="4">District 5</font></p>
<div class="color green"></div><p><font size="4">District 6</font></p>
</div>
<div id="map_canvas"></div>
</head>
</body>
</html>
爲什麼你在''
你_all_ HTML？ – geocodezip 2015-01-26 20:38:19我用html（＃skybox2）創建了自定義圖例，並且發佈了它，因爲我認爲它需要獲得幫助？我應該刪除它嗎？ – TWS 2015-01-26 20:40:44
如果我的回答沒有回答你的問題，我很抱歉。 – TWS 2015-01-26 20:44:49