Question

我正在建立一个用于课外研究的网站。该网站将通过google API托管一个地图，该地图会跟踪道路，最终将对我们提供的条件（例如天气）做出反应。现在，我们拥有遵循州际公路的坐标形式的数据。它们最终将来自外部文件。到目前为止，我一直在努力使用Google Maps snaptoroads和Google Maps Polyline。我正在自学HTML和Javascript来完成此项目，因此我对HTML设计（头与主体，浏览器的加载方式等）仍然缺乏经验。

现在，我的数据正在通过MVCArray运行，并为每个纬度/经度对绘制一条折线。我试图设置一个条件，以便折线会在for循环的每次迭代中更改颜色，所以当i = 0时，它是红色的，i = 1它是蓝色的，i = 2它是红色的，i = 3它再次是蓝色的等我试过做一个颜色= {插入条件}，然后加载新的谷歌地图折线（... strokeColor：color ...），但这会产生一条线，根据接收到的最终颜色为每个段着色。我目前正在尝试setOptions（{strokeColor：'red'}）设置，但产生的结果相同。除了我的API密钥，这就是我的身体。

//head sets up dimensions
<body>
    <div id="map" style="border: 5px solid #3872ac;"></div>

    <script>

    function initMap() {
      var mapOptions = {
        zoom: 14,
        center: {lat: 40.753113, lng: -111.911168},
        mapTypeId: 'roadmap'
      };
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);

      var latlon = [ // I- 80 // Utah
      -111.911168,40.753113,-111.911257,40.753266,-111.911375,40.75355,-111.911591,40.754278,-111.911853,40.754915,-111.912289,40.755729,-111.91252,40.756102,-111.912942,40.756701,-111.91323,40.75704,-111.913361,40.757192,-111.913391,40.757235,
      -111.913681,40.757575,-111.914291,40.758262,-111.914353,40.758332,-111.914695,40.758879,-111.914975,40.759496,-111.915098,40.760107,-111.91519,40.760638,-111.915209,40.760742,-111.915213,40.760767,-111.915219,40.760802,-111.91524,40.760921,
      -111.915248,40.761013,-111.915358,40.762147,-111.915365,40.762211,-111.915494,40.762791,-111.915624,40.763096,-111.915783,40.763336,-111.915933,40.76351,-111.916149,40.763722,-111.916829,40.764097,-111.917077,40.764218,-111.91712,40.764229,
      -111.917952,40.764442,-111.918057,40.764442,-111.918379,40.764444,-111.919688,40.764451,-111.921605,40.764458,-111.922163,40.764462,-111.922663,40.764466,-111.922708,40.764466,-111.923862,40.764479,-111.924058,40.764486,-111.926219,40.764511,
      -111.92649,40.764523,-111.926693,40.764526,-111.927059,40.764543,-111.927648,40.764572,-111.928067,40.764604,-111.928733,40.764686,-111.929495,40.764804,-111.929867,40.764867,-111.930232,40.764919,-111.932428,40.765252,-111.93275,40.765312,
      -111.932953,40.765344,-111.934726,40.765655,-111.93537,40.765737,-111.93543,40.765747,-111.93609,40.765852,-111.937173,40.766008,-111.937251,40.766013,-111.938261,40.76608,-111.939033,40.766103,-111.939189,40.766106,-111.939396,40.766112,
      -111.941011,40.765989,-111.941242,40.765975,-111.943228,40.765859,-111.944735,40.76577,-111.946527,40.765674,-111.947385,40.765616,-111.947843,40.765584,-111.948898,40.765512,-111.94932,40.765483,-111.949554,40.765467,-111.94959,40.765465,
      -111.950388,40.765411,-111.950697,40.76539,-111.951142,40.76536,-111.951922,40.765307,-111.952021,40.7653,-111.953592,40.765193,-111.953675,40.765187,-111.955595,40.765067,-111.957048,40.764975,-111.958936,40.764886,-111.960277,40.764823,
      -111.964906,40.764601,-111.965931,40.764552,-111.967386,40.764445,-111.96899,40.764407,-111.969064,40.764401,-111.971108,40.764375,-111.972276,40.764409,-111.972641,40.764417,-111.972962,40.764422,-111.975158,40.764394,-111.975483,40.764393,
      -111.975849,40.764401,-111.977142,40.764401,-111.978256,40.764393,-111.981672,40.764415,-111.984436,40.764394,-111.986532,40.764378,-111.987022,40.764403,-111.988707,40.764474,-111.991069,40.7648,-111.992537,40.765117,-111.993944,40.765491,
      -111.995156,40.765881,-111.996124,40.766225,-111.996877,40.766557,-111.998172,40.767135,-111.998738,40.767387,
    ];

     var coords = new google.maps.MVCArray;
     for (var i = 0; i < latlon.length; i += 2) {
       coords.push(new google.maps.LatLng(latlon[i+1],latlon[i]));
       var n = i/2;
       var newLine = new google.maps.Polyline({
         path: coords,
         geodesic: true,
         //strokeColor: color,
         strokeOpacity: 1.0,
         strokeWeight: 5
       });
       if (i === 1) {
         newLine.setOptions({
         strokeColor: '#8E44AD' //purple
       });
         //alert("first condition");
       } else if (i === 0) {
         newLine.setOptions({
         strokeColor: '#2980B9' //blue
       });
         //alert("second condition");
       } else {
         newLine.setOptions({
         strokeColor: '#C0392B' //red
       });
       }
       newLine.setMap(map);
    }}//close for loop//close function

    </script>
      <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=************&callback=initMap">
      </script>
    </body>

我总是只有一条彩色线。我该如何使颜色在for循环的每个部分切换？我的猜测是，我设置了此地图，以便在html加载结束时绘制折线，以便将接收到的最后一种颜色保留为其存储的所有点的颜色。

对html头/主体设置的任何评论也将不胜感激，因为到目前为止，我只在其中的所有内容都使该initMap函数起作用时。预先感谢。

折线颜色会改变整条线，而不是段

0 个答案: