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

Question

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

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

$.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 包含的内容。当我使用带标记的警报或绘图时，位置会正确显示在 map 上。

JSON

这是一张图片。我没有完全闭合多边形，而是得到了这些三 Angular 形的碎片。

Answer 1

如果方位 Angular 小于 90，则 computeOffset() 方法中的多边形左侧点将不起作用，因为 computeOffset() 仅采用从 0 开始并从北顺时针方向移动的 0-360 方位 Angular 。因此，如果方位 Angular 小于 90，只需取 360 并加上方位 Angular - 90。如果方位 Angular 大于 270，则取方位 Angular + 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 只是将多边形的宽度以英尺为单位。可以使用 bool 值和 if 语句将 boomconversionfactor 设置为 1(使其保持英尺)或 3.28(对于米)。使用除以二是因为宽度由左右距离决定。

多边形现在看起来像: