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

开始编辑 我的问题的一个总结是，我在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)
 ];

因此，我可以使用它们创建多段线，如本示例中所示

希望这能有所帮助，非常感谢您的关注

真诚地， 弗雷德克 结束编辑

我正在尝试创建一个单页应用程序，该应用程序将使用GoogleMapJavaSCIPTAPIV3显示地图。我想在地图上包括一条多段线。我有很多坐标需要进入该多段线，所以我正在尝试编写一个函数，可以使用我拥有的数据，并将其转换为一个可用的形式，以便google map api可以读取以构建我的多段线。

下面是我修改过的map.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)

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

真诚地

---

-弗雷德克

你的线路正在地图上显示，你就是看不见它

您已将地图的中心设置为（33.439346，-86.88312500000001），但如果您操控并检查配对数组，则会交换横向坐标和纵向坐标

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

无论如何，如果您想看到多段线，只需将这段代码放入addLine（）函数： panTo地图（对[0]）

---

您的多段线超出了地图边界，仅此而已。

您是否有机会总结您的问题，说“这是我开始使用的数组格式：

[x，y，z]

，这是我需要的数组格式：

[/*随便什么*/]

？因为这样我们就可以用代码帮助您进行转换，而无需阅读谷歌的文档等等……您的数组没有意义。它看起来像是来自KML的坐标（经度、纬度、高度元组，由空格分隔；这不是有效的javascript数组）。要创建google.maps.Polyline，它需要是一个google.maps.LatLng对象数组。是的，我可以总结这是一个更好的主意，谢谢你。总结将发布在上面。酷。尽管看看下面的答案，这似乎表明数组不是问题。嘿，我试图提供一个很好的总结，以帮助使它成为更全面。我很抱歉我说得这么含糊。希望这会有所帮助，谢谢你的建议。我假设HTML没有问题，我看到两个身体标签有相同的内容？？？？？我还假设你在CSS中设置了地图画布DIV的高度和宽度…是的，谢谢@Shashank Indian你是正确的。谢谢大家谢谢你帮我调查这件事。

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

[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]