Google Maps Javascript 用多边形制作路径答案

【问题标题】：Google Maps Javascript making path with polygonsGoogle Maps Javascript 用多边形制作路径
【发布时间】：2015-06-22 19:32:11
【问题描述】：

我正在尝试让 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

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

【问题讨论】：

second.json 中的数据是什么？（或将显示问题的示例数据......）
@geocodezip 我已经把json的内容放在上面了。谢谢
将这些红线放入一个多边形中会形成一个看起来很奇怪的多边形。你真正想做什么？
@geocodezip 这些点可能不是一个很好的表示。基本上我采用 lat lng 值，计算左右偏移（以突出显示对象移动的宽度），然后在该区域中关闭到下一个点。更好的 lat lng 数据样本将是一条路径，但无论如何我似乎无法获得点之间的区域来填充多边形。
@geocodezip 我已经放置了一个更好的点样本，我试图用多边形为其创建路径。我已经包含了一个指向上面 JSON 源的链接。我需要使用多边形，因为与 Google Maps Spherical 工具的 computeOffset() 方法结合使用是突出显示与输入宽度完全相同的区域的唯一方法。在大多数情况下，这将在乡村越野中使用，以在设备来回移动时跟踪我的设备在现场的宽度和覆盖范围。

标签： javascript jquery google-maps

【解决方案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（用于米）。之所以使用除以二，是因为宽度是由左右距离决定的。

多边形现在看起来像：

【讨论】：