좌표 (배열에서)에서지도 상에 다각형이 그려지지 않음

-1

왜 Google지도에서 다각형이 그려지지 않는지 알아 내려고합니다. 나는 배열에 그것을 닫았지만 정직하기 위해 내가 잘못하고있는 것을 볼 수 없다. Google API KEY를 아래 코드에서 삭제하여 조금만 줄였습니다.좌표 (배열에서)에서지도 상에 다각형이 그려지지 않음

팁/의견이 있으십니까?

<!DOCTYPE HTML> 
<html> 
<head> 
</head> 
<body> 
    <div id="map" style="width:100%;height:400px;"></div> 
</body> 
<script> 
    function initialize() 
    { 
     //fill array with coordinates 
     var path = [ 
      [51.14920179999362, 3.706512451171875], 
      [50.99042122689005, 3.475799560546875], 
      [50.93852713736125, 3.73809814453125], 
      [50.95929172950454, 4.003143310546875], 
      [51.108695514831865, 3.972930908203125] 
     ]; 

     //Options for the map 
     var mapOptions = { 
      zoom: 10, 
      center: new google.maps.LatLng(51.0108706, 3.7264613), 
     } 

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

     //options for the polygon 
     var polyOptions = { 
      paths: path, 
      strokeColor: '#FF0000', 
      strokeWeight: 2, 
      strokeOpacity: 0.8, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35, 
      editable: false, //editeren van de polygon 
      draggable: false //verplaatsen van de polygon 
     }; 

     //create the polygon 
     var polygon = new google.maps.Polygon(polyOptions); 
     polygon.setMap(map);  
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

</html>

출처

2017-12-18 TDB

,'단지 후미를 어,'paths : path'를','? –

브라우저 콘솔에 동작을 설명하는 데 도움이되는 출력이 있습니까? – tatmanblue

색인 0에 '메시지 : "색인 0에 : LatLng 또는 LatLngLiteral : 객체가 아닙니다."(LatLng 또는 LatLngLiteral 객체가 아닌 배열의 배열을 전달하기 때문에) – geocodezip

는 LatLngLiteral 객체 (또는 LatLng 객체)의 배열로 배열의 배열을 번역.

var fixedPath = []; 
for (var i=0; i<path.length; i++) { 
    fixedPath.push({lat:path[i][0],lng:path[i][1]}); 
} 
//options for the polygon 
var polyOptions = { 
    paths: fixedPath,

proof of concept fiddle

코드 : 당신은`대체하면 어떻게

function initialize() { 
 
    //fill array with coordinates 
 
    var path = [ 
 
    [51.14920179999362, 3.706512451171875], 
 
    [50.99042122689005, 3.475799560546875], 
 
    [50.93852713736125, 3.73809814453125], 
 
    [50.95929172950454, 4.003143310546875], 
 
    [51.108695514831865, 3.972930908203125] 
 
    ]; 
 

 
    //Options for the map 
 
    var mapOptions = { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(51.0108706, 3.7264613), 
 
    } 
 

 
    //generate map 
 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
    var fixedPath = []; 
 
    for (var i = 0; i < path.length; i++) { 
 
    fixedPath.push({ 
 
     lat: path[i][0], 
 
     lng: path[i][1] 
 
    }); 
 
    } 
 
    //options for the polygon 
 
    var polyOptions = { 
 
    paths: fixedPath, 
 
    strokeColor: '#FF0000', 
 
    strokeWeight: 2, 
 
    strokeOpacity: 0.8, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35, 
 
    editable: false, //editeren van de polygon 
 
    draggable: false //verplaatsen van de polygon 
 
    }; 
 

 
    //create the polygon 
 
    var polygon = new google.maps.Polygon(polyOptions); 
 
    polygon.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

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

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

출처

2017-12-18 20:25:00 geocodezip

나는 당신이 그곳에서 한 것을 보았습니다 ... 단순히 놀랍습니다! 도와 줘서 고마워! 이제 계속할 수 있습니다. – TDB

좌표 (배열에서)에서지도 상에 다각형이 그려지지 않음

답변

관련 문제