谷歌地图中的多边形

时间:2020-06-13 20:54:31

标签: javascript html maps

我想在地图上绘制具有不同颜色的多边形。我具有多边形的坐标,但是我想创建一个函数,该函数返回所有这些坐标,并且我不知道如何制作一个坐标并将其用于每个坐标三角形。这是我的代码。如何改善此代码并提取函数中的所有坐标?

 <div id="map"></div>
  <script>
    function myMap() {
      var options = {
        zoom: 11,
        center: { lat: 44.4361414, lng: 26.1027202 }
      }
      var map = new google.maps.Map(document.getElementById('map'), options)
      var coordSector1 = [
        {
          lat: 44.50256193717698,
          lng: 26.01710630000002
        },
        {
          lat: 44.43739163621129,
          lng: 26.069978004101582
        },
        {
          lat: 44.49129708905082,
          lng: 26.08027768671877
        }
      ]

      var coordSector6 = [
        {
          lat: 44.495215543923976,
          lng: 26.020539527539082
        },
        {
          lat: 44.45601914750226,
          lng: 26.00062680781252
        },
        {
          lat: 44.41238221932244,
          lng: 25.9941036754883
        },
        {
          lat: 44.434449907212425,
          lng: 26.067231422070332
        }
      ]
      var coordSector2 = [
        {
          lat: 44.428475610774086,
          lng: 26.09182407991633
        },
        {
          lat: 44.48826777346833,
          lng: 26.10555699007258
        },
        {
          lat: 44.439752587193496,
          lng: 26.18589451448664
        }
      ]
      var coordSector3 = [
        {
          lat: 44.428854565586654,
          lng: 26.108177995312502
        },
        {
          lat: 44.39010428050916,
          lng: 26.17615590058594
        },
        {
          lat: 44.43768015328322,
          lng: 26.185768937695315
        }
      ]
      var coordSector4 = [
        {
          lat: 44.42798525808772,
          lng: 26.101437117025704
        },
        {
          lat: 44.36764050751706,
          lng: 26.09525730745539
        },
        {
          lat: 44.390706417526765,
          lng: 26.17696812288508
        }
      ]
      var coordSector5 = [
        {
          lat: 44.406405667407185,
          lng: 26.00668003694758
        },
        {
          lat: 44.42994664415136,
          lng: 26.095943952963204
        },
        {
          lat: 44.37156726156249,
          lng: 26.09182407991633
        }
      ]

      var sector1Triangle = new google.maps.Polygon({
        paths: coordSector1,
        strokeColor: '#FF0000',
        strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.5
      })
      sector1Triangle.setMap(map);

      var sector6Triangle = new google.maps.Polygon({
        paths: coordSector6,
        strokeColor: '#0000cc',
        strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: '#0000cc',
        fillOpacity: 0.5
      })
      sector6Triangle.setMap(map);

      var sector5Triangle = new google.maps.Polygon({
        paths: coordSector5,
        strokeColor: '#0066ff',
        strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: '#0066ff',
        fillOpacity: 0.5
      })
      sector5Triangle.setMap(map);

      var sector2Triangle = new google.maps.Polygon({
        paths: coordSector2,
        strokeColor: '#ff6600',
        strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: '#ff6600',
        fillOpacity: 0.5
      })
      sector2Triangle.setMap(map);

      var sector3Triangle = new google.maps.Polygon({
        paths: coordSector3,
        strokeColor: '#ffff00',
        strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: '#ffff00',
        fillOpacity: 0.5
      })
      sector3Triangle.setMap(map);

      var sector4Triangle = new google.maps.Polygon({
        paths: coordSector4,
        strokeColor: '#00ff00',
        strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: '#00ff00',
        fillOpacity: 0.5
      })
      sector4Triangle.setMap(map);
    }

  </script>

0 个答案:

没有答案