2016-07-13 10 views
1

私は形状が作成されたときのために、このイベントリスナーがあります。しかし、.getPathsは()に関係なく、どのように多くの行の私の、緯度/経度の唯一のセットを返すように見えるGoogle Maps API描画ポリゴン - オーバーレイコンプリートイベントは、1セットの座標しか返しません。

// This example requires the Drawing library. Include the libraries=drawing 
 
// parameter when you first load the API. For example: 
 
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing"> 
 

 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: {lat: -33.872, lng: 151.252}, 
 
    zoom: 6 
 
    }); 
 

 
    var drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingMode: google.maps.drawing.OverlayType.POLYGON, 
 
    drawingControl: false, 
 
    drawingControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_LEFT, 
 
     drawingModes: [] 
 
    }, 
 
    polygonOptions: { 
 
     fillColor: 'rgba(255, 0, 0, 0.2)', 
 
     fillOpacity: 1, 
 
     strokeWeight: 2, 
 
     clickable: true, 
 
     editable: true, 
 
     zIndex: 1 
 
    }  
 
    }); 
 
    
 
    drawingManager.setMap(map); 
 
    // Define the LatLng coordinates for the outer path. 
 
    var outerCoords = [ 
 
    {lat: -25.364, lng: 155.207}, // north west 
 
    {lat: -35.364, lng: 155.207}, // south west 
 
    {lat: -35.364, lng: 148.207}, // south east 
 
    {lat: -25.364, lng: 148.207} // north east 
 
    ]; 
 

 

 
    map.data.add({geometry: new google.maps.Data.Polygon([outerCoords])}); 
 
    
 
    
 
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { 
 
    if(event.type == 'polygon') { 
 
     var verticles = event.overlay.getPaths(); 
 
     
 
     verticles.forEach(function(verticle, ind){ 
 
     console.log({ 
 
     "index": ind, 
 
     "lat": verticle.getAt(ind).lat(), 
 
     "lng": verticle.getAt(ind).lng(), 
 
     "obj": verticle.getAt(ind) 
 
     });   
 
     }); 
 
    } 
 
    
 
    
 
}); 
 
    
 
    
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <style> 
 
    html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    #map { 
 
     height: 100%; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
<div id="map"></div> 
 
<div id="capture"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFOolEMjIlnlkVle8gsiDA1ym3aktxEGc&libraries=drawing&callback=initMap" 
 
     async defer></script> 
 
</body> 
 
</html>

をポリゴンは次のもので構成されます。ドキュメントからは、オブジェクトの配列を返すように見えました。各オブジェクトは、線を描画するのに必要な2点(lat/lng)の配列です。私は何が欠けていますか?このため

答えて

2

変更

var verticles = event.overlay.getPaths(); 

var verticles = event.overlay.getPath().getArray() 
関連する問題