根据已知的纬度和经度点在图像上放置一个点的尝试失败

Question

我为这个模糊的标题道歉，我真的想不出一个完整的方法来总结它。建议非常受欢迎。

我正在做一个真正不需要谷歌地图的项目，它只会为这个项目增加额外的开销。但是，我不知道如何在没有谷歌地图的情况下做到这一点......到目前为止。

如果我将平面图的图形叠加放置到谷歌地图中，​​我可以使用浏览器位置来近似用户位置。为此，这是一个非常大的地方，因此存在一些准确性较差的空间。

现在我要做的是知道该叠加层的边界，将图像放入 div，然后根据浏览器的 lat/lng 计算用户在 div 中的位置。

我可以使用正方形的图像来接近，因为侧面的顶部是水平和垂直的，因为那是我的区域。但是因为世界上没有一个是这样运作的，所以我需要一个不是方形的区域来显示方形。我真的在数学上挣扎。

这就是我想要做的！

这是一个测试我的概念的链接，但没有考虑需要在地图上旋转的图像：http : //www.freeptools.com/mapster/singlerun/maptest.php

就像我说的，我确信这可以做到，但我还没有弄清楚它的数学原理。这让我疯狂。

这是我的代码，它正在发挥作用。一个函数获取浏览器坐标并将它们发送到初始化函数。然后基于我自己之前的映射，我得到了我试图映射的图像的边界。我正在使用半正弦公式来尝试获得用户点的高度和宽度（因为地图曲线，它在其他任何地方都不准确）位置，然后是与顶部和最左侧点的距离，然后取与左侧/顶部的距离并将其除以宽度/高度以获得它们与左侧/顶部的距离以定位点的百分比。这个想法，虽然我不能让它非常准确，但在这个例子中是有效的，因为图像在地图上水平排列。我的问题是当图像在地图上旋转时如何计算这些距离？我无法弄清楚那个数学。

function initialize(y3, x3) { //lat, lon

//var overlayBounds = new google.maps.LatLngBounds(new google.maps.LatLng(41.11246878918085, -90.5712890625), new google.maps.LatLng(47.68652571374621, -82.001953125));
var box = $("#map_canvas");

//image bounds
var x1 = -82.001953125;
var x2 = -90.5712890625;
var y1 = 41.11246878918085;
var y2 = 47.68652571374621;

var boxWidth = x2 - x1;
var boxHeight = y2 - y1;

//now we need to figure out where this rests, first we get the percentage
//var posLeft = haversine(y3, x1, y3, x3); //(x3 - x1);
var posLeft = (x3 - x1);
var posLeftPct = (posLeft/boxWidth)*100;

//var posTop = haversine(y2, x3, y3, x3); //(y2 - y3);
var posTop = (y2 - y3);
var posTopPct = (posTop/boxHeight)*100;

box.append('<img src="http://www.freeptools.com/mapster/icons/icon23.png" style="position:absolute; z-index:200; right:'+posLeftPct+'%; top:'+posTopPct+'%">');

}

Answer 1

假设该区域是一个平行四边形，您需要知道该区域的 3 个顶点以及要绘制图钉的区域的宽度/高度（例如平面图图像）。

以下将使用来自http://www.movable-type.co.uk/scripts/latlong.html的Geo-and LatLon-libraries

为了更好地理解的图像：

最初计算一些值：

• 轴承（nw 到 sw 和 nw 到 ne）通过 LatLon.bearingTo
• 距离（sw 到 nw 和 ne 到 nw）通过 LatLon.distanceTo

现在计算交叉点（在图像中标记为交叉点x和交叉点y）通过 LatLon.intersection

计算将是：

• 交叉点-x：
  LatLon.intersection(ne, bearingNWtoSW, target, bearingNWtoNE)
• 交叉点y：
  LatLon.intersection(sw, bearingNWtoNE, target,bearingNWtoSW)

现在计算边界北到目标和边界西到目标的距离的百分比值：

• 边界北目标：
  ((distanceNWtoNE-(target.distanceTo(intersection-x)))*100)/distanceNWtoNE
• 边界西目标：
  ((distanceNWtoSW-(target.distanceTo(intersection-y)))*100)/distanceNWtoSW

最后根据给定平面图的宽/高和之前的计算结果计算坐标

x=((width*distanceBorderNorthToTargetInPercent)/100);
y=((height*distanceBorderWestToTargetInPercent)/100);

LatLon执行所有这些计算的方法（上述-library 的扩展）：

/**
  *@param w int width of the drawing
  *@param h int height of the drawing
  *@param sw object LatLon of southwest of the drawing     
  *@param nw object LatLon of northwest of the drawing     
  *@param ne object LatLon of northeast of the drawing
  *@return mixed object with x/y-coordinates or null when LatLon is outside of the area        
  **/  
LatLon.prototype.translate = function(w,h,sw,nw,ne) {
    var x = {distance:nw.distanceTo(ne),bearing:nw.bearingTo(ne)},
        y = {distance:nw.distanceTo(sw),bearing:nw.bearingTo(sw)},
        intersectionY = LatLon.intersection(sw, x.bearing, this, y.bearing),
        intersectionX = LatLon.intersection(ne, y.bearing, this, x.bearing),
        distanceX,distanceY; 

    if(intersectionX && intersectionY){
       distanceX=((x.distance-(this.distanceTo(intersectionX)))*100)/x.distance,
       distanceY=((y.distance-(this.distanceTo(intersectionY)))*100)/y.distance;
       return {x:((w*distanceX)/100),y:((h*distanceY)/100)};
    }
    return null;
};

演示：http : //jsfiddle.net/doktormolle/nsbqpcvg/embedded/result/
将高亮的平面图悬停在google-map上查看计算结果（google-Maps-API仅用于演示，计算将在不使用 Maps-API 的情况下完成）