Question

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

为了检查是否有问题，我尝试了Google Maps Doc示例中提供的代码。它适用于那些坐标。我也包含了该代码（它被评论）。

runOnUiThread

编辑：如果你想尝试，这是一个codepen。 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>

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

1 个答案: