Javascript 基于已知lat和lng点在图像上放置点的尝试失败

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

我正在做一个不需要谷歌地图的项目，它只会为这个项目增加额外的开销。但是，如果没有谷歌地图，我想不出怎么做。。。到目前为止

如果我要在谷歌地图中放置一个平面图的图形覆盖图，我可以使用浏览器位置来近似用户的位置。对于这一点，它是一个非常大的地方，所以有一些低精度的空间

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

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

这里有一个链接测试了我的概念，但没有说明需要在地图上旋转的图像：

就像我说的，我确信这是可以做到的，但我还没有弄清楚它的数学模型。这快把我逼疯了

这是我的代码，正在发挥神奇的作用。函数获取浏览器坐标并将其发送给initialize函数。然后根据我之前的映射，我得到了我要映射的图像的边界。我使用哈弗森公式试图得到用户点的高度和宽度（因为地图弯曲，在其他任何地方都不准确）位置，然后是距离顶部和最左侧点的距离，然后将距离左/顶的距离除以宽度/高度，得到距离左/顶的百分比，以定位圆点。这个想法，虽然我不能让它超精确，但在这个例子中有效，因为图像在地图上水平排列。我的问题是，当图像在地图上旋转时，如何计算这些距离？我搞不懂那道数学题

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+'%">');

函数初始化（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））；
变量框=$（“映射画布”）；
//图像边界
变量x1=-82.001953125；
var x2=-90.5712890625；
变量y1=41.11246878918085；
变量y2=47.68652571374621；
var-boxWidth=x2-x1；
var boxHeight=y2-y1；
//现在我们需要弄清楚它的位置，首先我们要得到百分比
//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；
框。附加（“”）；

---

}

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

下面将使用来自的

Geo

-和

LatLon

-库

更好理解的图像：

最初计算一些值：

• 通过

  LatLon.轴承至
  

• 通过

  LatLon的距离（西南到西北和东北到西北）。距离到
  

现在通过

LatLon计算交点（在图像中标记为交点x和交点y）。交点

计算结果为：

• 交叉点-x:
  

  LatLon.交叉口（东北、北西、目标、北西）

• 交叉点-y:
  

  LatLon.交叉口（西南、北东、目标、北西）

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

• 北至目标边界：
  

  （（distanceNWtoNE-（target.distanceTo（intersection-x）））*100）/distanceNWtoNE

• 向西与目标接壤：
  

  （（distanceNWtoSW-（target.distanceTo（交叉点-y）））*100）/distanceNWtoSW

最后根据给定平面布置图的宽度/高度以及之前计算的结果计算坐标

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

一种执行所有这些计算的方法（上述

LatLon

-库的扩展）：

/**
  *@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;
};

演示：

---

将突出显示的平面布置图悬停在谷歌地图上以查看计算结果（谷歌地图API仅用于演示，计算将在不使用地图API的情况下完成）

您的代码是什么样子的？（请在问题本身中发布一个，而不仅仅是外部链接）我刚刚添加了代码。我现在的问题不是代码本身，而是它背后的概念。我在上面的编辑中提到，我目前使用的代码只是一个概念，因为图像的方向是向上和向下的。如果图像被旋转，它会将这个概念完全抛到窗外，而这正是我真正挣扎的地方。你从哪里获取图像的数据（边界和旋转）？在这种情况下，我从谷歌地图开始，自己定位，然后在本例中使用边界数据。至于我想尝试的下一个例子，我还没有计算出边界数据，但我在地图上看了足够多的信息，知道我想处理的建筑不是垂直的，而是旋转的，因此边界框不会与我想在独立div中显示的图像对齐。我不知道是否有帮助，但谷歌地图上使用的球形墨卡托投影（假设为球形大地水准面）背后的数学实际上相当直截了当。在大面积上，地图上有直边的东西在现实世界中是弯曲的，但对于小面积来说，这不应该是个问题。你可以