Question

我有一个代码tripCoordinates = [];

var coords[[37.772323, -122.214897],[21.291982, -157.821856],[-18.142599, 178.431]];
for(var i=0;i<coords.length;i++){                                           
   tripCoordinates.push(new google.maps.LatLng(coords[i][0],coords[i][1]));
  }

  console.log(tripCoordinates);
  var tripPath = new google.maps.Polyline({
    path: tripCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  tripPath.setMap(map);

我的问题是，谷歌地图不会在地图上显示该数据，如果我添加新的google.maps.LatLng（58.20554,23.58522）然后taht工作，但与循环数组，不会工作，任何建议？

甚至可以用这种方式显示数据吗？

Answer 1

tripCoordinates.push(new google.maps.LatLng(coords[i][0],coords[i][0]));

第二个coords[i][0]应为coords[i][1]

function initialize() {
  var mapOptions = {
    zoom: 3,
    center: new google.maps.LatLng(0, -180),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var coords = [
    [37.772323, -122.214897],
    [21.291982, -157.821856],
    [-18.142599, 178.431]
  ];

  tripCoordinates = [];
  for (var i = 0; i < coords.length; i++) {
    tripCoordinates.push(new google.maps.LatLng(coords[i][0], coords[i][1]));
  }

  console.log(tripCoordinates);
  var tripPath = new google.maps.Polyline({
    path: tripCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  tripPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

Answer 2

我在使用your fiddle时出现javascript错误（一旦我修复它就可以了）： Uncaught SyntaxError: Unexpected token [

在这一行：

var coords[[37.772323, -122.214897], [21.291982, -157.821856], [-18.142599, 178.431]];

应该是：

var coords = [[37.772323, -122.214897], [21.291982, -157.821856], [-18.142599, 178.431]];

然后它有效working fiddle

Google地图不显示折线

2 个答案: