无法通过传递经纬度数组来设置折线的路径答案

【问题标题】：Unable to set path of polyline by passing a lat-long array无法通过传递经纬度数组来设置折线的路径
【发布时间】：2015-05-19 16:07:30
【问题描述】：

var mycenter=new google.maps.LatLng(22.352319,82.605569);
var map;
var poly1;
var ary=new Array();
function initialize()
{
    var mapprop={
        center:mycenter,
        zoom:6,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    map=new google.maps.Map(document.getElementById("mapholder"),mapprop);

    poly1=new google.maps.Polyline({
        strokeColor: '#ff004c',
        strokeOpacity: 1.0,
        strokeWeight: 3
    });

    poly1.setMap(map);
    testmarker();
}

function showmarker(ary)
{
    var path=poly1.getPath();
    map.setZoom(15);
    path.push(ary);
    poly.setPath(path);  // this line doesn't execute
    alert(ary);    
}

google.maps.event.addDomListener(window,'load',initialize);

这里我试图通过函数showmarker() 设置折线的路径。数组ary 包含经纬度值。我想用ary 中的值显示折线。 ary 包含类似于以下 [(lat,long),(lat,long),...] 的值。我无法通过在其路径中传递此数组来显示折线。 poly1.setPath(path) 根本没有执行。

【问题讨论】：

以上代码中“poly.setPath(path)”为“poly1.setPath(path)”
请编辑您的问题以解决该问题。 testmarker 是什么？
抱歉，那个是误放在那里的，testmarker() 没有调用任何东西。
请编辑您的问题以解决该问题。
Testmarker 用于调用带有坐标数组的 showmarker。

标签： javascript arrays google-maps google-maps-api-3

【解决方案1】：

您不能直接推送路径(ary)，它是一个数组，但多边形路径由 LatLngs 组成。

您必须遍历项目并推送单个项目（LatLngs）

function initialize() {

  var mapprop = {
      center: new google.maps.LatLng(22, 82),
      zoom: 6
    },
    map = new google.maps.Map(document.getElementById("mapholder"), mapprop),
    poly1 = new google.maps.Polyline({
      map: map,
      path: [new google.maps.LatLng(22, 82.4),
        new google.maps.LatLng(21.7, 83)
      ]
    });
  showmarker([new google.maps.LatLng(22, 82),
      new google.maps.LatLng(21, 83),
      new google.maps.LatLng(22.5, 81),
      new google.maps.LatLng(20, 80)
    ],
    poly1
  );
}

function showmarker(
  path, //LatLng-Array
  poly //target-polygon
) {

  path.forEach(function(coord) {
    //note: getPath returns a reference,
    //you may add a point directly
    poly.getPath().push(coord);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="mapholder"></div>

【讨论】：

【解决方案2】：

<script>

var mycenter=new google.maps.LatLng(22.352319,82.605569);
var map;
var poly1;
var ary=new Array();
function initialize()
{
var mapprop={
center:mycenter,
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

map=new google.maps.Map(document.getElementById("mapholder"),mapprop);

// var polyoptions={ strokeColor: '#000000',
    // strokeOpacity: 1.0,
    // strokeWeight: 3
  // };
  poly1=new google.maps.Polyline({
  strokeColor: '#ff004c',
    strokeOpacity: 1.0,
    strokeWeight: 3

  });

  poly1.setMap(map);




}

function showmarker(ary)
{

var path=poly1.getPath();
map.setZoom(15);
var i;
for(i=0;i<ary.length;i++)
{
path.push(ary[i]);

}
poly1.setPath(path);




}




google.maps.event.addDomListener(window,'load',initialize);
</script>

感谢莫勒博士。这样效果很好。

【讨论】：