Google지도에 폴리곤이 표시되지 않습니다.

Question

AJAX 요청을 통해 폴리곤 좌표를 가져오고 모든 좌표를 연관 배열에 전달합니다.

문제는 폴리곤을 만들 때 표시되지 않지만 좌표보기와 함께이 쇼를 만드는 경우입니다. 나는 구글의 예와 함께이 잘 작동, 동일 할 경우

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

     var coords = new Array(); 

     $.ajax({ 
      type: 'GET', 
      url: 'http://nominatim.openstreetmap.org/reverse?format=json&osm_type=R&osm_id=2532299&polygon_geojson=1', 
      data: { get_param: 'value' }, 
      success: function (data) { 

       $.each(data.geojson.coordinates[0], function(index, value) { 

        if(typeof value[0] !== 'undefined' && typeof value[1] !== 'undefined') { 
         coords.push({lat: value[0], lng: value[1]}); 
        } 
       }); 
      } 
     }); 

     var zone = new google.maps.Polygon({ 
      paths: coords, 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35 
     }); 

     zone.setMap(map); 
    } 

:

이

는 코드입니다. 연관 배열이 작동하지 않는 이유를 모르겠습니다. 예제의

코드 :

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

     var triangleCoords = [ 
      {lat: -34.817177, lng: -58.500948}, 
      {lat: -34.688414, lng: -58.500948}, 
      {lat: -34.688414, lng: -58.336764}, 
      {lat: -34.817177, lng: -58.336764}, 
      {lat: -34.817177, lng: -58.500948} 
     ]; 

     var zone = new google.maps.Polygon({ 
      paths: triangleCoords, 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35 
     }); 

     zone.setMap(map); 
    } 

Answer 1

당신은 게시 된 코드를 사용하여 두 가지 문제가 있습니다.

1. 귀하의 $.ajax 호출은 비동기, 그래서 당신은 다각형의 paths 속성을 채울 때 데이터를 사용할 수 없습니다. 사용할 수있는 콜백 함수에서 데이터를 사용해야합니다.

2. 다각형의 경로에서 위도와 경도가 반대로되어 있습니다.

$.ajax({ 
    type: 'GET', 
    url: 'http://nominatim.openstreetmap.org/reverse?format=json&osm_type=R&osm_id=2532299&polygon_geojson=1', 
    data: { 
    get_param: 'value' 
    }, 
    success: function(data) { 
    var zone = new google.maps.Polygon({ 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: map 
    }); 
    $.each(data.geojson.coordinates[0], function(index, value) { 
     if (typeof value[0] !== 'undefined' && typeof value[1] !== 'undefined') { 
     coords.push({ 
      lat: value[1], 
      lng: value[0] 
     }); 
     } 
     zone.setPath(coords); 
    }); 
    } 
}) 

proof of concept fiddle

코드 :

var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: -34.7281512, 
 
     lng: -58.262616 
 
    }, 
 
    zoom: 10 
 
    }); 
 

 
    var coords = new Array(); 
 

 
    $.ajax({ 
 
    type: 'GET', 
 
    url: 'https://nominatim.openstreetmap.org/reverse?format=json&osm_type=R&osm_id=2532299&polygon_geojson=1', 
 
    data: { 
 
     get_param: 'value' 
 
    }, 
 
    success: function(data) { 
 
     var zone = new google.maps.Polygon({ 
 
     strokeColor: '#FF0000', 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 2, 
 
     fillColor: '#FF0000', 
 
     fillOpacity: 0.35, 
 
     map: map 
 
     }); 
 
     $.each(data.geojson.coordinates[0], function(index, value) { 
 
     if (typeof value[0] !== 'undefined' && typeof value[1] !== 'undefined') { 
 
      coords.push({ 
 
      lat: value[1], 
 
      lng: value[0] 
 
      }); 
 
     } 
 
     zone.setPath(coords); 
 
     }); 
 
    } 
 
    }) 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>