Googleマップの日線を越えて多角形を描く方法

Question

私は多角形をGoogleマップ上の一日の行に描いていますが、それは私の曜日のラインの片側、示しています。ここでは

は私の座標です：

北緯：71.2683°

東経：145.7786°

南緯度：-14.3576°

西経度：ここでは-178.8774°

は、私が持っているコードです。私はそれがGoogleマップでの四角形のAPIを使用することによって解決される可能性があります知っている

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

が、私のプロジェクトの目的のために、私は必要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

コードスニペット：

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

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

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

を