如何在Google地图中绘制多边形跨越日线

Question

我想在Google地图上绘制一条横跨日线的多边形，但它只给出了日线一侧的部分，即如图所示的较小阴影部分：

这是我的坐标：

北纬：71.2683°

东经：145.7786°

南纬度：-14.3576°

西经：-178.8774°

这是我的代码：

var north = 71.2683;
var south = -14.3576;
var east = 145.7786;
var west = -178.8774;

var rectCoords = [
    {lat: north, lng: west},
    {lat: north, lng: east},
    {lat: south, lng: east},
    {lat: south, lng: west}
];

var rect = new google.maps.Polygon({
    paths: [rectCoords],
    strokeColor: '#FF0000',
    strokeOpacity: 0.35,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0,
    clickable: false
});

rect.setMap(maps["my_map"]);

我知道可以通过在Google Map中使用Rectangle API来解决，但出于项目目的，我需要使用Polygon API。有谁有想法吗？谢谢！

Answer 1

沿路径中间的顶部和底部边缘添加点：

var rectCoords = [
    {lat: north, lng: west},
    {lat: north, lng: (west+east)/2},
    {lat: north, lng: east},
    {lat: south, lng: east},
    {lat: south, lng: (west+east)/2},
    {lat: south, lng: west}
];

proof of concept fiddle

代码段

＆＃13;

＆＃13;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var north = 71.2683;
  var south = -14.3576;
  var east = 145.7786;
  var west = -178.8774;

  var rectCoords = [{
      lat: north,
      lng: west
    },
    {
      lat: north,
      lng: (west + east) / 2
    },
    {
      lat: north,
      lng: east
    },
    {
      lat: south,
      lng: east
    },
    {
      lat: south,
      lng: (west + east) / 2
    },
    {
      lat: south,
      lng: west
    }
  ];

  var rect = new google.maps.Polygon({
    paths: [rectCoords],
    strokeColor: '#FF0000',
    strokeOpacity: 0.35,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0,
    clickable: false
  });

  rect.setMap(map);
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < rectCoords.length; i++) {
    bounds.extend(rectCoords[i]);
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;