Цвета полилинии изменяют всю линию, а не сегмент - PullRequest
Новая
       22

Цвета полилинии изменяют всю линию, а не сегмент

0 голосов
/ 07 мая 2019

Я создаю веб-сайт для внеклассных исследований. На веб-сайте будет размещаться карта с помощью API Google, которая будет отслеживать дороги, которые в конечном итоге будут реагировать на условия, которые мы ей предоставляем (например, на погоду). Прямо сейчас у нас есть данные в виде координат, которые следуют за автомагистралями между штатами. В конце концов они придут из внешнего файла. До сих пор я боролся со снимками Google Maps и полилинией Google Maps. Я учу себя HTML и Javascript для этого проекта, поэтому я все еще довольно неопытен в дизайне HTML (голова против тела, как загружаются браузеры и т. Д.).

Прямо сейчас мои данные проходят через MVCArray и строят ломаную линию для каждой пары широта / долгота. Я пытаюсь установить условие, чтобы полилинии меняли цвет для каждой итерации цикла for, поэтому, когда i = 0, это красный, i = 1 это синий, i = 2 это красный, i = 3 снова синий , так далее. Я попытался сделать цвет = {вставить условия}, а затем загрузить новую полилинию карт Google (... 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 head / body также были бы очень благодарны, потому что до сих пор я только когда-либо делал эту функцию initMap работающей, когда все внутри нее. Заранее спасибо.

...