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
    })

但这不起作用。我没有错误，也没有出现多边形。 This is在检查latLngArray内容时得到什么。

因此，我确实需要一个像this one这样的多边形，而我要获取的数据来自here。

有什么想法吗？

Answer 1

由于paths的值必须为array of objects，因此可以通过另一种方式尝试它：

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，但已交换。

Answer 2

纬度必须在90到-90度之间。在您的数组中，第一个数字超出有效纬度（["-112.3240289","33.5096918"]）的范围，因此必须是经度（也是FYI，GeoJSON规范以[longitude, latitude]的方式定义地理坐标）。

更改代码以按正确的顺序使用坐标：

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

proof of concept fiddle（带有几个要点）。

代码段：

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>

将数组数组转换为LatLang作为多边形路径

2 个答案: