Преобразование массива массивов в LatLang как полигональные пути

Question

Мне нужно преобразовать массив массивов в LatLang и использовать в качестве параметра пути в многоугольнике. Мой массив выглядит так:

 let jsonArrays = [
     [
       "-112.3240289",
       "33.5096918"
     ],
     [
       "-112.3240288",
       "33.5096836"
      ],
     [
        "-112.3240144",
        "33.507364"
      ],
      ...and thousands more


  for (let i = 0; i < jsonArrays.length; i++) {
        let gData = new google.maps.LatLng(parseFloat(jsonArrays[i][0]), parseFloat(jsonArrays[i][1]));
        latLngArray.push(gData);
    }
    let poly = new google.maps.Polygon({
        paths: latLngArray,
        strokeColor: '#00a153',
        strokeOpacity: 0.8,
        strokeWeight: 3,
        // fillColor: '#FF0000',
        fillOpacity: 0
    })

Но это не работает. Я не получил ошибку и полигоны не появляются. Это , что я получаю, когда проверяю содержимое latLngArray.

Итак, мне нужен именно такой многоугольник, как , этот , и данные, которые я беру, взяты из здесь .

Есть идеи?

Answer 1

Широта должна быть между 90 и -90 градусами.В вашем массиве первое число находится за пределами диапазона допустимых широт (["-112.3240289","33.5096918"]), поэтому должна быть указана долгота (также, FYI, спецификация GeoJSON определяет географические координаты таким образом [longitude, latitude]).

Изменитекод для использования координат в правильном порядке:

let gData = new google.maps.LatLng(parseFloat(jsonArrays[i][1]), parseFloat(jsonArrays[i][0]));

подтверждение концепции скрипта (с парой добавленных точек).

фрагмент кода:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 24.886,
      lng: -70.268
    },
    mapTypeId: 'terrain'
  });
  var latLngArray = [];
  let jsonArrays = [
    ["-112.3240289", "33.5096918"],
    ["-112.3240288", "33.5096836"],
    ["-112.3240144", "33.507364"],
    ["-112.327685", "33.5073"],
    ["-112.327728", "33.51"],
    ["-112.324016", "33.51"],
  ]


  for (let i = 0; i < jsonArrays.length; i++) {
    let gData = new google.maps.LatLng(parseFloat(jsonArrays[i][1]), parseFloat(jsonArrays[i][0]));
    latLngArray.push(gData);
  }
  let poly = new google.maps.Polygon({
    paths: latLngArray,
    strokeColor: '#00a153',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    // fillColor: '#FF0000',
    fillOpacity: 0,
    map: map
  });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < poly.getPath().getLength(); i++) {
    bounds.extend(poly.getPath().getAt(i));
  }
  map.fitBounds(bounds);
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

Answer 2

Поскольку значение paths должно быть массивом объектов , вы можете попробовать его другим способом:

let jsonArrays = [
  ['-112.3240289', '33.5096918'],
  ['-112.3240288', '33.5096836'],
  ['-112.3240144', '33.507364'],
  ['-112.3240289', '33.5096918']
];

const newCoords = jsonArrays.map(val => ({
  lat: parseFloat(val[1]), // y value
  lng: parseFloat(val[0])  // x value
}));

let poly = new google.maps.Polygon({
  paths: newCoords,
  strokeColor: '#00a153',
  strokeOpacity: 0.8,
  strokeWeight: 3,
  // fillColor: '#FF0000',
  fillOpacity: 0
});

С Array#map вы можете вернуть исходный массив, преобразованный в новый массив объектов, который включает в себя ваши lat и lng, но поменялись местами.