Google Maps API - 在单个数组中切换多条折线答案

【问题标题】：Google Maps API - toggle multiple polylines in a single arrayGoogle Maps API - 在单个数组中切换多条折线
【发布时间】：2018-04-02 04:33:04
【问题描述】：

我一直在努力解决这个问题。类似的帖子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 -->

我能够使用带有标记的类似结构，并且没有那么大的问题。有一个多边形勾勒出关键区域，我希望折线显示相应类别中包含的项目，在本例中为“正在建设中”。”

无论我如何尝试调用显示和隐藏函数，我都无法让多段线共同显示。

我也经常遇到 Uncaught ReferenceError: displayProjectArray is not defined。

下面是我的 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);
        }
}

【问题讨论】：

请提供一个minimal reproducible example 来证明该问题。我收到 javascript 错误：Uncaught SyntaxError: Unexpected identifier on {polyline coordinates}。
谢谢@geocodezip 我用一些折线坐标更新了上面的javascript。再次感谢！
现在我得到一个不同的错误：Uncaught ReferenceError: displayProjectArray is not defined 和 Uncaught ReferenceError: infowindow is not defined，请提供一个 minimal reproducible example 来演示该问题，您已经测试以验证它是否有效并重现了您遇到的问题询问。
抱歉，这是我的第一次询问。我能够通过删除“createProjectsArray()”函数并修复我在拼写“displayProject(s)Array()”和“hideProject(s)Array()”时遇到的错误来找出解决方案 - 我忘记了's' 调用函数时。解决方案如下。

标签： javascript arrays google-maps google-maps-api-3 polyline

【解决方案1】：

我能够找到解决方案。除了调用函数以显示和隐藏数组时出现拼写错误（我忘记了 displayProject(s)Array() 和 hideProject(s)Array() 中的“s” strong>; 我只是将所有更改为单数）我在数组中循环以获得不正确的结果。正确的函数是：

/*-- 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);

【讨论】：