谷歌地图 v3 没有显示带有我的坐标集的折线。 它适用于示例中提供的坐标。 为什么？

Question

有一些奇怪的事情正在发生。 我试图画一条折线来标记一个区域的边界。 我有边界的坐标。 但是当我尝试绘制折线时，它没有显示出来。

为了检查是否有问题，我尝试了 Google Maps Doc 示例中给出的代码。 它适用于这些坐标。 我也包含了该代码（已注释）。

function initialize() 
{
  var bangalore = new google.maps.LatLng(12.9102585,77.6456604);
  var mapOptions = {
      zoom:11,
      center: bangalore,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: true,
      streetViewControl: false,
      mapTypeControl: false,
      zoomControl: true,
      panControl: false,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.TOP_LEFT
      },
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var boundaryCoordinates = [
      new google.maps.LatLng(77.446060, 13.096199),
      new google.maps.LatLng(77.378082, 13.130304),
      new google.maps.LatLng(77.365723, 13.094861),
      new google.maps.LatLng(77.382202, 13.084160),
      new google.maps.LatLng(77.378082, 12.981810),
      new google.maps.LatLng(77.367783, 12.952368),
      new google.maps.LatLng(77.384949, 12.942330),
      new google.maps.LatLng(77.382202, 12.897489),
      new google.maps.LatLng(77.417908, 12.893473),
      new google.maps.LatLng(77.391815, 12.820505),
      new google.maps.LatLng(77.429581, 12.795732),
      new google.maps.LatLng(77.511292, 12.744168),
      new google.maps.LatLng(77.579956, 12.739479),
      new google.maps.LatLng(77.597122, 12.787696),
      new google.maps.LatLng(77.632141, 12.790375),
      new google.maps.LatLng(77.632141, 12.835904),
      new google.maps.LatLng(77.663727, 12.826531),
      new google.maps.LatLng(77.651367, 12.804436),
      new google.maps.LatLng(77.680206, 12.798410),
      new google.maps.LatLng(77.711792, 12.807114),
      new google.maps.LatLng(77.739258, 12.867368),
      new google.maps.LatLng(77.769470, 12.854649),
      new google.maps.LatLng(77.862167, 12.822514),
      new google.maps.LatLng(77.883453, 12.832557),
      new google.maps.LatLng(77.891693, 12.868037),
      new google.maps.LatLng(77.888260, 12.893473),
      new google.maps.LatLng(77.859421, 12.926268),
      new google.maps.LatLng(77.823029, 12.969096),
      new google.maps.LatLng(77.830582, 12.989839),
      new google.maps.LatLng(77.789383, 12.988500),
      new google.maps.LatLng(77.796249, 13.059413),
      new google.maps.LatLng(77.823029, 13.068108),
      new google.maps.LatLng(77.818222, 13.083491),
      new google.maps.LatLng(77.770844, 13.082154),
      new google.maps.LatLng(77.750931, 13.115593),
      new google.maps.LatLng(77.761230, 13.150364),
      new google.maps.LatLng(77.737885, 13.152370),
      new google.maps.LatLng(77.663040, 13.155045),
      new google.maps.LatLng(77.587509, 13.167080),
      new google.maps.LatLng(77.501678, 13.156382),
      new google.maps.LatLng(77.507172, 13.177777),
      new google.maps.LatLng(77.467346, 13.177108),
      new google.maps.LatLng(77.472153, 13.165074),
      new google.maps.LatLng(77.437820, 13.157719),
      new google.maps.LatLng(77.427521, 13.137660),
      new google.maps.LatLng(77.442627, 13.131642),
      new google.maps.LatLng(77.446060, 13.096199),
  ];

  var boundary = new google.maps.Polyline({
      path: boundaryCoordinates,
      geodesic: false,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2,
  });

  boundary.setMap(map);

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

  //   console.log(flightPlanCoordinates);

  // var flightPath = new google.maps.Polyline({
  //   path: flightPlanCoordinates,
  //   geodesic: true,
  //   strokeColor: '#FF0000',
  //   strokeOpacity: 1.0,
  //   strokeWeight: 2
  // });

  // flightPath.setMap(map);
}


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

编辑：如果您想尝试，这里有一个代码笔。 http://codepen.io/anon/pen/aOVVmr

Answer 1

您的坐标向后，google.maps.LatLng 类的第一个参数应该是纬度，第二个参数应该是经度。 您使用它（错误地）是这样的：

new google.maps.LatLng(<longitude>,<latitude>);

应该

new google.maps.LatLng(<latitude>,<longitude>);

 function initialize() { var bangalore = new google.maps.LatLng(12.9102585, 77.6456604); var mapOptions = { zoom: 10, center: bangalore, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: true, streetViewControl: false, mapTypeControl: false, zoomControl: true, panControl: false, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.TOP_LEFT }, }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var boundaryCoordinates = [ new google.maps.LatLng(77.446060, 13.096199), new google.maps.LatLng(77.378082, 13.130304), new google.maps.LatLng(77.365723, 13.094861), new google.maps.LatLng(77.382202, 13.084160), new google.maps.LatLng(77.378082, 12.981810), new google.maps.LatLng(77.367783, 12.952368), new google.maps.LatLng(77.384949, 12.942330), new google.maps.LatLng(77.382202, 12.897489), new google.maps.LatLng(77.417908, 12.893473), new google.maps.LatLng(77.391815, 12.820505), new google.maps.LatLng(77.429581, 12.795732), new google.maps.LatLng(77.511292, 12.744168), new google.maps.LatLng(77.579956, 12.739479), new google.maps.LatLng(77.597122, 12.787696), new google.maps.LatLng(77.632141, 12.790375), new google.maps.LatLng(77.632141, 12.835904), new google.maps.LatLng(77.663727, 12.826531), new google.maps.LatLng(77.651367, 12.804436), new google.maps.LatLng(77.680206, 12.798410), new google.maps.LatLng(77.711792, 12.807114), new google.maps.LatLng(77.739258, 12.867368), new google.maps.LatLng(77.769470, 12.854649), new google.maps.LatLng(77.862167, 12.822514), new google.maps.LatLng(77.883453, 12.832557), new google.maps.LatLng(77.891693, 12.868037), new google.maps.LatLng(77.888260, 12.893473), new google.maps.LatLng(77.859421, 12.926268), new google.maps.LatLng(77.823029, 12.969096), new google.maps.LatLng(77.830582, 12.989839), new google.maps.LatLng(77.789383, 12.988500), new google.maps.LatLng(77.796249, 13.059413), new google.maps.LatLng(77.823029, 13.068108), new google.maps.LatLng(77.818222, 13.083491), new google.maps.LatLng(77.770844, 13.082154), new google.maps.LatLng(77.750931, 13.115593), new google.maps.LatLng(77.761230, 13.150364), new google.maps.LatLng(77.737885, 13.152370), new google.maps.LatLng(77.663040, 13.155045), new google.maps.LatLng(77.587509, 13.167080), new google.maps.LatLng(77.501678, 13.156382), new google.maps.LatLng(77.507172, 13.177777), new google.maps.LatLng(77.467346, 13.177108), new google.maps.LatLng(77.472153, 13.165074), new google.maps.LatLng(77.437820, 13.157719), new google.maps.LatLng(77.427521, 13.137660), new google.maps.LatLng(77.442627, 13.131642), new google.maps.LatLng(77.446060, 13.096199), ]; var boundaryCoordinatesRev = []; for (var i = 0; i < boundaryCoordinates.length; i++) { boundaryCoordinatesRev.push(new google.maps.LatLng(boundaryCoordinates[i].lng(), boundaryCoordinates[i].lat())); } var boundary = new google.maps.Polyline({ path: boundaryCoordinatesRev, geodesic: false, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2, }); boundary.setMap(map); // 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) // ]; // console.log(flightPlanCoordinates); // var flightPath = new google.maps.Polyline({ // path: flightPlanCoordinates, // geodesic: true, // strokeColor: '#FF0000', // strokeOpacity: 1.0, // strokeWeight: 2 // }); // flightPath.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize);

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

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas" style="border: 2px solid #3872ac;"></div>