关键词：
【中文标题】在谷歌地图上画一个凸包【英文标题】：Draw a convex hull on a google map 【发布时间】：2016-11-05 17:33:14 【问题描述】：我是 javascript 新手，正在使用 google maps API for javascript。
这是学校的任务，我们得到了一个工作脚本和一些 php 代码来显示地图、获取位置、更新位置等等。
我们的任务是实现一个凸包算法。
这些是我遇到的问题：
一些对象的数据结构 计算出船体线条后如何在地图上显示它们这是代码；
function convexHull()
console.log("convexHull()");
console.log(obj.length);
//check if there are more than one user, otherwise convex hull calculation would be useless
if(obj.length > 0)
//lists with x-positions and y-positions
var pos_x = [];
var pos_y = [];
//fill the lists
for(var i = 0;i < obj.length; i++)
pos_y.push(parseFloat(obj[i][1]));
pos_x.push(parseFloat(obj[i][2]));
console.log("point " + i + ": lat = " + pos_y[i] + ", lon = " + pos_x[i]);
//find lowest point index
var low_index = 0
for(var i = 1;i < obj.length; i++)
if(pos_y[i] < pos_y[low_index])
low_index = i
var angle_list = []
//make list of angles linked to index, the lowest point will not be in this list
for(var i = 0;i < obj.length; i++)
if(i != low_index)
var opos = pos_y[i] - pos_y[low_index];
var adj = pos_x[i] - pos_x[low_index];
//opos will always be positive, since the point with index low_index is the lowest point
if(adj > 0)
var new_angle = Math.atan(opos/adj);
var list_item = index:i, angle:new_angle;
angle_list.push(list_item);
if(adj < 0)
var new_angle = Math.atan(opos/adj)+ Math.PI;
var list_item = index:i, angle:new_angle;
angle_list.push(list_item);
if(adj == 0) //if adj = 0, angle is 90 degrees
var new_angle = 90;
var list_item = index:i, angle:new_angle;
angle_list.push(list_item);
//sort angle_list by ascending angles
angle_list = angle_list.sort(function(a,b)return a.angle - b.angle;);
for(var i=0;i< angle_list.length;i++)
console.log("angle = " + angle_list[i].angle + ", index = " + angle_list[i].index);
//GRAHAM ALGORITHM STARTS HERE
//this list will hold all indexes of convex points
var final_list = [];
//put the lowest point in the angle_list
var list_item = index:low_index, angle:0;
angle_list.unshift(list_item);
//NEW STUFF HERE
//eerst het beginpunt met laagste y-coor invoegen
//english: inserting the starting point [lowest y coordinate]
final_list.unshift(angle_list[0]);
for(var i=2;i<angle_list.length;i++)
var value = (((pos_x[angle_list[i-1].index]-pos_x[angle_list[i-2].index])*(pos_y[angle_list[(i)].index]-pos_y[angle_list[i-2].index]))-((pos_y[angle_list[i-1].index]-pos_y[angle_list[i-2].index])*(pos_x[angle_list[(i)].index]-pos_x[angle_list[i-2].index])));
//left turn, this is good
if(value > 0)
console.log("left turn");
final_list.push(angle_list[i-1]);
//right turn, this is not good
if(value < 0)
console.log("right turn");
continue;
//points lie on a line
if(value == 0)
final_list.push(angle_list[i-1]);
console.log("colinear");
setTimeout(function()convexHull();, 5000);
console.log(final_list);//this is what the console outputs: [Object, Object, Object, Object, Object] I don't understand why it has this structure!
return final_list;
function DrawHull(final_list)
for(var i = 0; i < final_list.length-1; i++)
console.log(parseFloat(obj[final_list[i]]));
var p1 = new L.LatLng(parseFloat(obj[final_list[i]][1]),parseFloat(obj[final_list[i]][2]));
var p2 = new L.LatLng(parseFloat(obj[final_list[i+1]][1]),parseFloat(obj[final_list[i+1]][2]));
var pointList = [p1, p2];
polylines.push(new L.polyline(pointList,
color: 'yellow',
weight: 10,
opacity: 0.5,
smoothFactor: 1
).addTo(mymap));
我的主要是这样的；
getLocation();
var mymap = L.map('mapid').setView([51.0336851,3.7019778], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/id/z/x/y.png?access_token=accessToken',
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: //I deleted this, I figured it should stay private
).addTo(mymap);
DrawHull(convexHull()); //These two funcions and this line are the only things I wrote with my classmate [and his code is based on some code he found on the web and adjusted to our needs]
基本上我首先想知道的是为什么 var final_list 有一个结构 [Object, Object, Object, Object, Object] （控制台输出什么）
因为我收到此错误：Uncaught TypeError: Cannot read property 'length' of undefined at DrawHull
我认为我以正确的方式实现了该算法，但我无法对其进行测试。
如果您需要更多信息，请不要犹豫，我们也欢迎您提出如何让这个问题变得更好的提示 [这是我的第一个问题！因此，请考虑到这一点，并在提供建设性反馈时保持友善]
【问题讨论】：
【参考方案1】：我最终自己修复了它，并告诉我回答我自己的问题是个好主意，这样如果人们偶然发现这个问题，他们就会有答案:)
代码如下：
function convexHull()
console.log("convexHull()");
console.log(obj.length);
//check if there are more than one user, otherwise convex hull calculation would be useless
if(obj.length > 0)
//lists with x-positions and y-positions
var pos_x = [];
var pos_y = [];
//fill the lists
for(var i = 0;i < obj.length; i++)
pos_y.push(parseFloat(obj[i][1]));
pos_x.push(parseFloat(obj[i][2]));
console.log("point " + i + ": lat = " + pos_y[i] + ", lon = " + pos_x[i]);
//find lowest point index
var low_index = 0
for(var i = 1;i < obj.length; i++)
if(pos_y[i] < pos_y[low_index])
low_index = i
var angle_list = []
//make list of angles linked to index, the lowest point will not be in this list
for(var i = 0;i < obj.length; i++)
if(i != low_index)
var opos = pos_y[i] - pos_y[low_index];
var adj = pos_x[i] - pos_x[low_index];
//opos will always be positive, since the point with index low_index is the lowest point
if(adj > 0)
var new_angle = Math.atan(opos/adj);
var list_item = index:i, angle:new_angle;
angle_list.push(list_item);
if(adj < 0)
var new_angle = Math.atan(opos/adj)+ Math.PI;
var list_item = index:i, angle:new_angle;
angle_list.push(list_item);
if(adj == 0) //if adj = 0, angle is 90 degrees
var new_angle = 90;
var list_item = index:i, angle:new_angle;
angle_list.push(list_item);
//sort angle_list bij ascending angles
angle_list = angle_list.sort(function(a,b)return a.angle - b.angle;);
for(var i=0;i< angle_list.length;i++)
console.log("angle = " + angle_list[i].angle + ", index = " + angle_list[i].index);
//GRAHAM ALGORITHM STARTS HERE
//this list will hold all indexes of convex points
var final_list = [];
//put the lowest point in the angle_list
var list_item = index:low_index, angle:0;
angle_list.unshift(list_item);
//NEW STUFF HERE
//eerst het beginpunt met laagste y-coor invoegen
final_list.unshift(angle_list[0]);
for(var i=2;i<angle_list.length;i++)
var value = (((pos_x[angle_list[i-1].index]-pos_x[angle_list[i-2].index])*(pos_y[angle_list[(i)].index]-pos_y[angle_list[i-2].index]))-((pos_y[angle_list[i-1].index]-pos_y[angle_list[i-2].index])*(pos_x[angle_list[(i)].index]-pos_x[angle_list[i-2].index])));
//left turn, this is good
if(value > 0)
console.log("left turn");
final_list.push(angle_list[i-1]);
if(i==angle_list.length-1)final_list.push(angle_list[i]);
//right turn, this is not good
if(value < 0)
console.log("right turn");
continue;
//points lie on a line
if(value == 0)
final_list.push(angle_list[i-1]);
console.log("colinear");
console.log(final_list);//dit is de output: [Object, Object, Object, Object, Object]
console.log("final_list length: " + Object.keys(final_list).length);
console.log("Drawing the hull now\n");
//console.log("obj:" + obj + "\n");
for(var i = 0; i < Object.keys(final_list).length-1; i++)
//console.log("obj[final_list[i].index]\n" + parseFloat(obj[final_list[i].index]));
var p1 = new L.LatLng(parseFloat(obj[final_list[i].index][1]),parseFloat(obj[final_list[i].index][2]));
var p2 = new L.LatLng(parseFloat(obj[final_list[i+1].index][1]),parseFloat(obj[final_list[i+1].index][2]));
var pointList = [p1, p2];
//adding the last line to close the hull
if(i == Object.keys(final_list).length-2)
console.log("laatste punt bereikt");
var p1 = new L.LatLng(parseFloat(obj[final_list[i+1].index][1]),parseFloat(obj[final_list[i+1].index][2]));
var p2 = new L.LatLng(parseFloat(obj[final_list[0].index][1]),parseFloat(obj[final_list[0].index][2]));//start
var pointList = [p1, p2];
polylines.push(new L.polyline(pointList,
color: 'yellow',
weight: 5,
opacity: 0.5,
smoothFactor: 1
).addTo(mymap));
setTimeout(function()convexHull();, 5000);
//L.polyline.setMap(null);
【讨论】：
在谷歌地图上画一条线/路径
】在谷歌地图上画一条线/路径【英文标题】：Drawingaline/pathonGoogleMaps【发布时间】：2011-01-1116:40:33【问题描述】：我一直忙于寻找如何在HelloMapView中的地图上的两个(GPS)点之间画一条线，但没有运气。谁能告诉我怎么做。假设我... 查看详情
使用 C# 在谷歌地图上画线 [关闭]
】使用C#在谷歌地图上画线[关闭]【英文标题】：DrawLineonGoogleMapusingC#[closed]【发布时间】：2012-10-0523:22:47【问题描述】：我正在使用C#使用GoogleMAP集成。现在我想创建屏幕线功能。简而言之，我只想在GoogleMap上的点击事件上的两... 查看详情
在谷歌地图上绘制标记时是不是可以禁用标记？
】在谷歌地图上绘制标记时是不是可以禁用标记？【英文标题】：Isitpossibletodisableamarkerwhiledrawingitongooglemap?在谷歌地图上绘制标记时是否可以禁用标记？【发布时间】：2015-11-1022:28:41【问题描述】：我正在使用googlemapapiv2开发应... 查看详情
在谷歌地图上分享位置
】在谷歌地图上分享位置【英文标题】：SharinglocationongoogleMaps【发布时间】：2014-10-2703:40:38【问题描述】：我是androidLocationAPI和Maps的新手。我正在考虑制作一个可以用来分享朋友位置并在谷歌地图上找到他们的应用程序。市场... 查看详情
在谷歌地图中围绕一个点绘制半径
】在谷歌地图中围绕一个点绘制半径【英文标题】：DrawradiusaroundapointinGooglemap【发布时间】：2010-10-2323:19:17【问题描述】：我正在使用GoogleMapsAPI并添加了标记。现在我想在每个标记周围添加一个10英里的半径，这意味着一个在缩... 查看详情
在谷歌地图中隐藏纬度和经度
】在谷歌地图中隐藏纬度和经度【英文标题】：HidingthelatitudeandlongitudeinaGoogleMap【发布时间】：2011-07-1419:19:59【问题描述】：我正在制作一个谷歌地图，它会在地图上显示一个应该对用户保密的地点。所以我的问题是如何在我的... 查看详情
无法在谷歌地图中添加多个标记（颤振）
】无法在谷歌地图中添加多个标记（颤振）【英文标题】：Cannotaddmorethanonemarkeringooglemap(flutter)【发布时间】：2021-11-2404:24:44【问题描述】：我正在尝试在谷歌地图中添加多个标记，但是一旦我调用该函数，只会显示最后一个标... 查看详情
在谷歌地图上绘制方向
】在谷歌地图上绘制方向【英文标题】：DrawingdirectionsonGoogleMaps【发布时间】：2011-12-0318:10:21【问题描述】：我认为这将是一个非常基本的问题。我正在使用codigniter构建一个应用程序，其中用户必须在地图上标记目的地，GoogleMap... 查看详情
以编程方式在谷歌地图颤动上选择一个标记
】以编程方式在谷歌地图颤动上选择一个标记【英文标题】：Programmaticallyselectingamarkerongooglemapflutter【发布时间】：2019-10-1208:08:56【问题描述】：我们必须显示标记InfoWindow并增加标记的大小以通过编程方式显示突出显示位置的焦... 查看详情
在谷歌地图上显示风向
】在谷歌地图上显示风向【英文标题】：ShowwinddirectiononGoogleMaps【发布时间】：2011-01-1717:22:11【问题描述】：我计算了风向，现在我想显示风向指向144度（在指南针上）。如何在Google地图上显示此箭头？【问题讨论】：【参考方... 查看详情
在谷歌地图android上显示位置
】在谷歌地图android上显示位置【英文标题】：showlocationongooglemapandroid【发布时间】：2015-05-1112:46:12【问题描述】：我有一个EditText和一个Button我想在地图中查找位置。我正在使用AsyncTask执行这里是我对AsyncTask类的调用。当我使用... 查看详情
如何使用 api 在谷歌地图中仅显示一个国家或特定区域？
】如何使用api在谷歌地图中仅显示一个国家或特定区域？【英文标题】：HowtodisplayonlyonecountryoraspecificareainGooglemapsusingtheapi?【发布时间】：2010-10-1713:13:25【问题描述】：我在一个项目中使用谷歌地图，我想在我的地图窗口中只显... 查看详情
在谷歌地图中将当前位置映射到目的地位置
】在谷歌地图中将当前位置映射到目的地位置【英文标题】：mappingcurrentlocationtodestinationlocationingoogleMaps【发布时间】：2011-07-0918:18:29【问题描述】：我的注释上有一个按钮，如下所示调用谷歌地图。我正在尝试将一条路线从我... 查看详情
当位置返回多个结果时，在谷歌地图中选择第一个匹配静态
】当位置返回多个结果时，在谷歌地图中选择第一个匹配静态【英文标题】：selectingfirstmatchingooglemapsstaticwhenlocationreturnsmultipleresults【发布时间】：2012-05-1213:48:04【问题描述】：我正在使用GoogleMaps静态界面在我的Web应用程序中显... 查看详情
在谷歌地图标记标签的字体真棒图标标记中放置一个数字
】在谷歌地图标记标签的字体真棒图标标记中放置一个数字【英文标题】：Puttinganumberinsideafontawesomeiconmarkerforgooglemapsmarkerlabel【发布时间】：2019-03-1707:41:48【问题描述】：我在下面有这个谷歌地图标记，我使用fontawesomemarkericon作... 查看详情
在谷歌地图v2 android中移动标记
】在谷歌地图v2android中移动标记【英文标题】：Movemarkersingooglemapv2android【发布时间】：2012-11-2313:30:17【问题描述】：我正在AndroidGooglemapsv2中进行地图聚类。我只想将标记从一个地理点动画化到另一个地理点。有没有办法在Google... 查看详情
有没有可能在谷歌地图上制作工具栏？
】有没有可能在谷歌地图上制作工具栏？【英文标题】：Isthereanypossiblethatmakeatoolbarongooglemap?【发布时间】：2015-04-1502:23:14【问题描述】：我曾尝试在谷歌地图上添加UItoolbar，但地图被工具栏覆盖。即使我将地图视图添加为子视... 查看详情
如何在谷歌地图中表示路线中的方向？
】如何在谷歌地图中表示路线中的方向？【英文标题】：Howtorepresentdirectioninarouteingooglemaps?【发布时间】：2019-08-2508:33:06【问题描述】：在一个项目中，我使用PolylineOptions显示一条路线，用于从一个POI到下一个POI绘制矩形。我还... 查看详情