多边形未在Google地图中显示

Question

我通过AJAX请求获取多边形坐标，并将所有坐标传递给关联数组。

问题是，当我创建Polygon时，这不会显示，但如果我使用坐标示例创建它，则显示。

这是代码：

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

You have two issues with the posted code.

1. Your $.ajax call is asynchronous, so the data isn't available when you try to populate the paths attribute of the polygon. You need to use the data in the callback function when/where it is available.

2. You have the latitude and longitude reversed in the path of the polygon.

$.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

代码段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;