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

Question

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) 根本没有执行。

Answer 1

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

您必须迭代项目并推送单个项目(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>