谷歌地图Javascript制作多边形路径

Question

我正在尝试使用Google Maps Javascript API从JSON中获取点并使用computeOffset（）函数来计算左右点，以便我可以使用多边形绘制路径。我当前的代码似乎只是制作奇怪的形状，而不是从点到点进行干净的多边形连接。

我将var lastPoint定义为jQuery $ .each循环中的lastPoint，这样当查询转到下一个lat lng值时，多边形将连接到前一个点。我没有点到点的漂亮方形多边形，而是形状奇怪，主要是三角形而不是正方形。

$.getJSON('sixth.json', function(data) { 
  var lastPoint;
  var myLatlng2;
  var polyShape;

  $.each( data.contactdetails, function(i, value) {
    myLatlng2 =  new google.maps.LatLng(value.lat, value.lng);

    var boomwidth = value.boomwidth;
    var bear = value.bear;
    var boomconversionfactor = 1;

//computeOffset returns a LatLng position by using the bearing and number of feet to return another location
    var point1 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear + 90);
    var point2 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear - 90);
    var point3 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, 90 + bear);
    var point4 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear - 90);

    if (lastPoint !== undefined){
      var point1 = google.maps.geometry.spherical.computeOffset(lastPoint, (0.30480 * boomwidth * boomconversionfactor) / 2, bear + 90);
      var point2 = google.maps.geometry.spherical.computeOffset(lastPoint, (0.30480 * boomwidth * boomconversionfactor) / 2, bear - 90);
    }

    var Coords = [point1,point2, point3, point4];

    // Construct the polygon.
    polyShape = new google.maps.Polygon({
      paths: Coords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });

    polyShape.setMap(map); 

//assign lastPoint the lat lng value from the jQuery loop. Trying to connect previous position to next by placing the lastPoint outside the loop.

  lastPoint = myLatlng2;

  }); //close of .each jQuery loop




 });

这是json包含的内容。当我使用带标记的警报或绘图时，位置会在地图上正确显示。

JSON

这是一张图片。而不是干净地关闭多边形我得到这些三角形的碎片。

Answer 1

如果轴承小于90，则computeOffset（）方法中多边形的左侧点将无法工作，因为computeOffset（）仅从0开始承载0-360并从北向顺时针方向移动。因此，如果轴承小于90，只需取360并添加轴承 - 90.如果轴承大于270，则取轴承+ 90并减去360.

以下代码将使多边形在路径周围形成正确的形状：

   var bear2;
   if(bear>270){bear2 = (bear + 90) - 360;} else{bear2 = bear + 90;}
   var bear3;
   if(bear<90) { bear3 = 360 + (bear -90);} else{bear3 = bear - 90;}


    var point1 =    google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear2);
 var point2 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear3);
   var point3 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2,  bear2);
   var point4 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear3);

        if (lastPoint !== undefined){
  var point1 =    google.maps.geometry.spherical.computeOffset(lastPoint, (0.30480 * boomwidth * boomconversionfactor) / 2 , bear3);
 var point2 = google.maps.geometry.spherical.computeOffset(lastPoint, (0.30480 * boomwidth * boomconversionfactor) / 2, bear2);

        }

0.30480 * boomWidth * boomconversionfactor只是将多边形的宽度以英尺为单位。使用boolean和if语句，boomconversionfactor可以设置为1（使其保持英尺）或3.28（米）。使用除以2是因为宽度由向左和向右的距离决定。

多边形现在看起来像：