我一直在努力解决这个问题。类似的帖子here对我没有帮助，尽管它有道理。
我正在尝试映射多条折线并将它们整理成一个单独的数组，然后我可以点击地图上方创建的图例中的按钮来切换。
传奇和地图的html位 -
<!-- BEGIN MAP LEGEND -->
<div id="legend" style="width: 100%; display: table;">
<div style="display: table-row">
<div class="form-group" id="under-con" type="checkbox" onClick="toggleUnderConstruction()">
<label id="under-conLabel" for="under-con" title="Click to toggle view or hide"><img alt="" src="images/trafficmap/underIcon_invert.png" height="50" width="50" align="middle" class="form-group-legend" id="under-con-icon" /></label>
</br>
<center><b>UNDER CONSTRUCTION</b></center>
</div>
<div class="form-group" .........>ANOTHER TOGGLE CATEGORY</div>
<div class="form-group" .........>ANOTHER TOGGLE CATEGORY</div>
</div>
</div>
<!-- END MAP LEGEND -->
<!-- BEGIN MAP AREA -->
<div id="map"></div>
<!-- END MAP AREA -->
我能够使用带有标记的类似结构，并且没有多少问题。有一个多边形概述了关键区域，我希望折线显示相应类别中包含的项目，在这种情况下，“正在建设中”。＆＃34;
无论我如何尝试调用显示和隐藏功能，我都无法将折线统一显示出来。
我也一直得到Uncaught ReferenceError：未定义displayProjectArray。
以下是我的JavaScript。我不仅需要一个解决方案的帮助，而且理解为什么各种折线不会在地图上显示将有所帮助。提前谢谢。
======以下每条评论的编辑javascript代码======
var Projects1 = new Array();
var map;
function initMap() {
var myOptions = {
zoom:10,
mapTypeId: 'roadmap',
center: {lat: 33.757517, lng: -116.053676},
disableDefaultUI: true,
zoomControl: true,
panControl: true,
gestureHandling: 'cooperative'
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
/*-- Under Construction PROJECT POLYLINES --*/
var projectPoly1 = new google.maps.Polyline({
path: [
{lat: 33.820743, lng: -117.518175},
{lat: 33.825307, lng: -117.523582},
{lat: 33.828016, lng: -117.526758},
{lat: 33.829941, lng: -117.528389},
{lat: 33.839566, lng: -117.534054},
{lat: 33.842560, lng: -117.534912},
{lat: 33.845340, lng: -117.534826},
{lat: 33.848905, lng: -117.534311},
{lat: 33.851114, lng: -117.534483},
{lat: 33.853966, lng: -117.535341},
{lat: 33.858456, lng: -117.535942},
{lat: 33.860666, lng: -117.537144},
{lat: 33.862661, lng: -117.538860},
{lat: 33.865583, lng: -117.542036},
{lat: 33.867650, lng: -117.543495},
{lat: 33.869503, lng: -117.544267},
{lat: 33.879765, lng: -117.546413},
{lat: 33.883826, lng: -117.548473},
{lat: 33.894015, lng: -117.557400},
{lat: 33.895654, lng: -117.558601},
{lat: 33.898931, lng: -117.559974},
{lat: 33.902992, lng: -117.560146},
{lat: 33.912964, lng: -117.557829},
{lat: 33.920016, lng: -117.556799},
{lat: 33.931268, lng: -117.556112},
{lat: 33.938105, lng: -117.555855},
{lat: 33.945154, lng: -117.555168},
{lat: 33.948287, lng: -117.553623},
{lat: 33.952345, lng: -117.550533},
{lat: 33.957044, lng: -117.548817},
{lat: 33.986228, lng: -117.548988},
{lat: 33.991921, lng: -117.550190},
{lat: 34.021876, lng: -117.550361}
],
strokeColor: '#5074af',
strokeOpacity: 1.0,
strokeWeight: 4
});
Projects1.push(projectPoly1);
var projectPoly2 = new google.maps.Polyline({
path: [
{lat: 33.823559, lng: -117.003538},
{lat: 33.823559, lng: -117.006338},
{lat: 33.823422, lng: -117.033673},
{lat: 33.823969, lng: -117.036472},
{lat: 33.837785, lng: -117.058538},
{lat: 33.839016, lng: -117.061502},
{lat: 33.839973, lng: -117.064960},
{lat: 33.840247, lng: -117.068583},
{lat: 33.839700, lng: -117.097070},
{lat: 33.839700, lng: -117.113866},
{lat: 33.838195, lng: -117.120618},
{lat: 33.837648, lng: -117.123747},
{lat: 33.838059, lng: -117.127369},
{lat: 33.841341, lng: -117.138896},
{lat: 33.841478, lng: -117.141860},
{lat: 33.839563, lng: -117.151740},
{lat: 33.838742, lng: -117.154210},
{lat: 33.827663, lng: -117.167878},
{lat: 33.826705, lng: -117.172818},
{lat: 33.827252, lng: -117.175782},
{lat: 33.830262, lng: -117.179240},
{lat: 33.830262, lng: -117.204434},
{lat: 33.830125, lng: -117.226171},
{lat: 33.830262, lng: -117.245601}
],
strokeColor: '#5074af',
strokeOpacity: 1.0,
strokeWeight: 4
});
Projects1.push(projectPoly2);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
displayProjectArray(Projects1);
hideProjectArray(Projects1);
}
function createProjects1Array() {
for (var i=0; i<Projects1.length; i++) {
if(Projects1[i].getMap(map)) {
Projects1[i].setMap(null);
} else {
Projects1[i].setMap(map);
}
}
}
/*-- SHOW polyline sets --*/
function displayProjectsArray(projectArray) {
for(var i = 0; i < projectArray.length; i++) {
projectArray[i].setVisible(true);
}
}
/*-- HIDE polyline sets --*/
function hideProjectsArray(projectArray) {
for(var i = 0; i < projectArray.length; i++) {
projectArray[i].setVisible(false);
}
}
/*-- TOGGLE LEGEND blocks --*/
function toggleUnderConstruction(){
/*-- If LEGEND block toggled OFF --*/
if(document.getElementById('under-con').checked) {
document.getElementById('under-con').checked = false;
document.getElementById('under-con').style.backgroundColor='white'; /*-- If LEGEND block toggled OFF, style="background: white" --*/
document.getElementById('under-con').style.color='black'; /*-- If LEGEND block toggled OFF, style="color: black" --*/
}
/*-- If LEGEND block toggled ON --*/
else {
document.getElementById('under-con').checked = true;
document.getElementById('under-con').style.backgroundColor='#004d99'; /*-- If LEGEND block toggled ON, style="background: #004d99" --*/
document.getElementById('under-con').style.color='white'; /*-- If LEGEND block toggled ON, style="color: white" --*/
}
/*-- If LEGEND block toggled ON, then display polylines (array) --*/
if(document.getElementById('under-con').checked) {
displayProjectArray(Projects1);
}
/*-- Else do NOT display polylines (array) --*/
else {
hideProjectArray(Projects1);
}
}
答案 0 :(得分：0)
我能够找到解决方案。除了调用函数显示和隐藏数组时的拼写错误（我忘记了 displayProject（s）Array（）中的's'和 hideProject（s）数组（）;我只是将所有内容改为单数）我在数组中循环以获得不正确的结果。正确的功能是：
/*-- SHOW project array sets --*/
function displayProjectArray(projectArray) {
for(var i = 0; i < projectArray.length; i++) {
projectArray[i].setMap(map);
}
}
/*-- HIDE project array sets --*/
function hideProjectArray(projectArray) {
for(var i = 0; i < projectArray.length; i++) {
projectArray[i].setMap(null);
}
}
然后只是调用正确的函数（使用正确的拼写......）
displayProjectArray(Projects1);
hideProjectArray(Projects1);