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

时间:2015-01-10 03:02:09

标签: javascript html google-maps google-maps-api-3

开始编辑 我的问题的摘要是我在这种格式的javascript文件中有一些数据:

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

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

 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)
 ];

这样我就可以使用它们来创建折线,如本示例here

希望这有助于并且非常感谢您对此进行调查。

此致 Fredk 结束修改

我正在尝试创建一个单页应用程序,它将使用google map javascipt api v3显示地图。我想在地图上加一条折线。我有许多坐标需要进入折线,所以我试图编写一个函数,可以使用我拥有的数据并将其转换为可用的形式,谷歌地图api可以阅读以构建我的折线。 Here is a link to the google api page where I received that source code I have been modifying.

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

这是与显示地图相关的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>

这是console.log(对)的日志;在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以深入挖掘时,您会发现它们包含在for循环期间分配的数据,这些数据从map.js的第20行开始。当我在chrome中检查并且地图正在显示时,我没有收到任何错误,但它没有绘制折线。感谢您提前的时间。

此致

-Fredk

1 个答案:

答案 0 :(得分:1)

您的线路正在显示地图,您无法看到它

您已将地图的中心设置为(33.439346,-86.88312500000001),但如果您控制并检查对数组,则会交换纬度和长坐标

对[0]给我:lat = -86.86975061322778,long = 33.45022772942718

无论如何,如果你想看到你的折线,只需将这段代码扔进你的addLine()函数: map.panTo(对[0]);

你的折线在地图边界之外,就是这样。