关于jquery：使用多边形的Google Maps Javascript制作路径

Google Maps Javascript making path with polygons

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

我正在将var lastPoint定义为jQuery $ .each循环中的lastPoint，以便当查询转到下一个经纬度值时，多边形将连接至上一个点。我得到的不是点到点的漂亮正方形多边形，而是怪异的形状，主要是三角形而不是正方形。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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

这是图像。我没有干净地关闭多边形，而是得到了这些三角形的块。

Google

相关讨论

如果方位角小于90，则computeOffset()方法中的多边形向左指向的点将不起作用，因为computeOffset()仅采用0-360的方位角，从0开始并从北开始顺时针旋转。因此，如果轴承小于90，则简单地取360，然后加上轴承-90。如果轴承大于270，则取90，然后减去360。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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仅将多边形的宽度以英尺为单位。通过使用布尔值和if语句，可以将boomconversionfactor设置为1(使其保持英尺)或3.28(对于米)。使用二分法是因为宽度由左右之间的距离决定。

多边形现在看起来像：

Polygons