当坐标更改时，Google地图多边形的孔不起作用

I initiated my Google Maps using jQuery, and using the latest version of Google Maps. Trying to implement in WordPress with jQuery version 1.12.4 (as WP core's using this). I's following the Google Maps' Polygon with Hole. But whenever I changed the coordinates to mine, it seems not working at all. The innerCoords are not intersecting, but overlapping the outerCoords.

我使用jQuery启动了Google地图，并使用了最新版本的Google地图。尝试使用jQuery版本1.12.4在WordPress中实现（作为WP核心使用此）。我正在关注谷歌地图的多边形孔。但每当我将坐标改为我的坐标时，它似乎根本不起作用。内部线圈不交叉，但与外部线圈重叠。

I first thought it could be a matter of land and water, so I moved my coords from land to water, but the problem persists. I thought my coords are lengthy, so I minimized 'em .123 (3 digits after dot), but the problem persists.

我首先想到的可能是土地和水的问题，所以我将我的坐标从陆地转移到水面，但问题仍然存在。我认为我的坐垫很长，所以我最小化了'em .123（点后3位），但问题仍然存在。

Here's a Fiddle for the whole code:
https://jsfiddle.net/mayeenulislam/c884wy06/

这是整个代码的小提琴：https：//jsfiddle.net/mayeenulislam/c884wy06/

The code in question is as follows:

有问题的代码如下：

var map_container = $('#map');

if (map_container.length > 0) {
  var latitude = 23.900460,
      longitude = 90.341313;
 /*
 // Uttara Center (Land)
 var latitude = 23.875029,
     longitude = 90.381631; */

 /*
 // Bermuda Center (Water)
 var latitude = 24.886,
     longitude = -70.268; */

  function initialize(lat, lng) {
    var locationLatLng = {
        lat: lat,
        lng: lng
      },
      mapCanvas = document.getElementById('map'),
      mapOptions = {
        center: locationLatLng,
        zoom: 15, //ideal 12
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
          position: google.maps.ControlPosition.LEFT_BOTTOM
        },
        //scrollwheel: false,
        streetViewControl: false,
      };

    map = new google.maps.Map(mapCanvas, mapOptions);

    // Define the LatLng coordinates for the polygon's  outer path.
    var outerCoords = [
      {lat: 23.900, lng: 90.337},
      {lat: 23.905, lng: 90.343},
      {lat: 23.898, lng: 90.342}

      /*
      // Uttara, Dhaka Coordinates (Land)
      {lat: 23.875007, lng: 90.370270},
      {lat: 23.880893, lng: 90.383404},
      {lat: 23.875634, lng: 90.380571}*/

      /*
      // Bermuda Triangle (Water)
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}*/
    ];

    // Define the LatLng coordinates for the polygon's inner path.
    // Note that the points forming the inner path are wound in the
    // opposite direction to those in the outer path, to form the hole.
    var innerCoords = [
      {lat: 23.899, lng: 90.341},
      {lat: 23.900, lng: 90.342},
      {lat: 23.898, lng: 90.342}

      /*
      // Uttara, Dhaka Coordinates (Land)
      {lat: 23.877067, lng: 90.377367},
      {lat: 23.878000, lng: 90.378438},
      {lat: 23.876833, lng: 90.378591}*/

      /*
        // Bermuda Triangle (Water)
        {lat: 28.745, lng: -70.579},
        {lat: 29.570, lng: -67.514},
        {lat: 27.339, lng: -66.668}*/
    ];

    // Construct the polygon, including both paths.
    var coverage = new google.maps.Polygon({
      paths: [outerCoords, innerCoords],
      strokeColor: '#FFC107',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FFC107',
      fillOpacity: 0.35
    });

    coverage.setMap(map);
  }

  google.maps.event.addDomListener(window, 'load', initialize(latitude, longitude));
}

I commented out the two other coordinates - the actual Bermuda Triangle, and one of my coords of land - so that you can test the code. I thought it could be the zoom level that matters, but I inspected with the Bermuda Triangle one - it's working on any zoom level.

我评论了另外两个坐标 - 实际的百慕大三角和我的一块土地 - 以便你可以测试代码。我认为它可能是重要的缩放级别，但我检查了百慕大三角形 - 它正在任何缩放级别上工作。

What am I doing wrong?

我究竟做错了什么？

2 个解决方案

#1

I simply changed the order of the inner coordinates and it worked. Change your innerCoords with the following:

我只是改变了内坐标的顺序，它起作用了。使用以下内容更改内部Coords：

     var innerCoords = [ {
       lat: 23.900156,
       lng: 90.342533
     },{
       lat: 23.899989,
       lng: 90.341664
     }, {
       lat: 23.898037,
       lng: 90.342983
     }

#2

Recently answered a post about that, It's all about the order of your coordinates:

最近回复了一篇关于它的帖子，这是关于坐标的顺序：

SO Post on coordinates order

SO发布坐标顺序

#1