如何将 JavaScript 数组转换为可用于创建多边形线的格式

How to convert JavaScript array into usable format for creating a poly line

本文关键字：创建 用于 多边形 格式 JavaScript 数组 转换      更新时间：2023-09-26

开始编辑我的问题的总结是我在javascript文件中有一些格式的数据：

var coords = [y,x,y,x,y,x,y,x];

x 是 y 是坐标，并按照它们在文件中列出的顺序配对。我需要尝试将它们变成这种格式 

 var flightPlanCoordinates = [
 new google.maps.LatLng(37.772323, -122.214897),
 new google.maps.LatLng(21.291982, -157.821856),
 new google.maps.LatLng(-18.142599, 178.431),
 new google.maps.LatLng(-27.46758, 153.027892)
 ];

这样我就可以使用它们来创建折线，如此处的示例所示。

希望这有所帮助，非常感谢您对此进行调查。

真诚地弗雷德克结束编辑

我正在尝试创建一个单页应用程序，该应用程序将使用谷歌地图javascipt api v3显示地图。我想在地图上包含折线。我有很多坐标需要进入该折线，所以我正在尝试编写一个函数，该函数可以使用我拥有的数据并将其转换为可用的形式，以便谷歌地图 API 可以读取以构建我的折线。这是指向谷歌 api 页面的链接，我收到了我一直在修改的源代码。

以下是我修改的地图.js文件的副本：

var flightPath;
var map;
var xCoords = [];
var yCoords = [];        
var i;
var j;
var pair = [];
function initialize() {
    var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(33.439346,-86.88312500000001),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var coordinates = [-86.86975061322778,33.45022772942718,0 -86.86983081545476,33.44984709324155,0 -86.8698489609808,33.44972050194397,0 -86.86984514868711,33.44957326614615,0 -86.86986831806067,33.44945663523548,0 -86.86988032018508,33.44933971655625,0 -86.86987767688218,33.44933538273567,0 -86.86985346069216,33.44926927479551,0 -86.86986610347115,33.44915520689104,0 -86.86987403521013,33.44909614577527,0 -86.87000166115789,33.44913075253221,0 -86.87006933561028,33.44913077797188,0 -86.87020144056702,33.44912059996341,0 -86.87037409276223,33.44909566406788,0 -86.87050920030728,33.44907279547318,0 -86.87056967910343,33.44906069346168,0 -86.87064517640975,33.44905301035505,0 -86.87066506563541,33.44905763617184,0 -86.87070559474269,33.44904079277664,0 -86.87112477907611,33.44879061812004,0 -86.87127714823728,33.44868441478428,0 -86.87133831092851,33.44862255914364,0 -86.87140829509003,33.44856066110657,0 -86.87160009010373,33.44852059950046,0 -86.87177381495617,33.44852885327281,0 -86.8718301146428,33.44853226046898,0 -86.87183530028184,33.44850711755228,0 -86.87181601728712,33.4484921764092,0 -86.87178381435213,33.44847478536339,0 -86.87176815693098,33.44847361441725,0 -86.87170865889149,33.44844433307853,0 -86.87165866194815,33.44841835989084,0 -86.87163277565037,33.44838974773397,0 -86.87160506943319,33.44833412435006,0 -86.87160937360066,33.44831453017596,0 -86.8716225021317,33.44828365572863,0 -86.87169370199757,33.44823222790846,0 -86.87173270895835,33.44821186026292,0 -86.87177013275485,33.44820796953973,0 -86.87184415685101,33.44818735703936,0 -86.871869569778,33.4481511439548,0 -86.87186292650776,33.44812763854002,0 -86.87183464441262,33.44811319128804,0 -86.87175085693765,33.44796655620282,0 -86.87165115638439,33.4477646420685,0 -86.86991597400394,33.44592231552179,0 -86.8696875427883,33.44577012473676,0 -86.86949455487714,33.4456781129633,0 -86.86931261173804,33.44567309377634,0 -86.86910291206763,33.44574427950384,0 -86.86904316532795,33.44570799260179,0 -86.86903785312185,33.44570790754563,0 -86.86902051276523,33.44567222884994];
for (i = 0,j=0; i < coordinates.length; ++i) {
     yCoords[j] = coordinates[i];
    ++i;
    xCoords[j] = coordinates[i];
    pair[j] = new google.maps.LatLng(xCoords[j], yCoords[j]);
    ++j;  
};
    console.log(pair);
  flightPath = new google.maps.Polyline({
  path: pair,
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2
  });
  addLine();
}
function addLine() {
flightPath.setMap(map);
}
function removeLine() {
flightPath.setMap(null);
}
google.maps.event.addDomListener(window, 'load', initialize)

这是我与显示地图相关的 html 文件：

  <body>
    <div id="panel">
      <input onclick="removeLine();" type=button value="Remove line">
      <input onclick="addLine();" type=button value="Restore line">
    </div>
    <div id="map-canvas"></div>
  </body>
   <body>
    <div id="panel">
      <input onclick="removeLine();" type=button value="Remove line">
      <input onclick="addLine();" type=button value="Restore line">
    </div>
    <div id="map-canvas"></div>
  </body>

这是控制台的日志.log（pair）;在map.js的第27行：

[hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf, hf]

.

当您单击hf进行更深入的挖掘时，您会意识到它们包含在map.js的第20行开始的for循环期间分配的数据。当我在 chrome 中检查并且地图显示时，我没有收到任何错误，但它没有绘制折线。提前感谢您抽出宝贵时间。

真诚地

-弗雷德克

您的线路正在被地图显示，您只是看不到它

您已将 map 的中心设置为 （33.439346，-86.883125000000001），但如果控制台并检查配对数组，则纬度和长坐标将交换

对[0] 给我 ： lat=-86.86975061322778， long=33.45022772942718

无论如何，如果你想看到你的折线，只需将这段代码放入你的addLine（）函数中：map.panTo（对[0]）;

您的折线在地图边界之外，仅此而已。

相关文章：