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

Question

我为这个模糊的标题道歉，我真的想不出一个击球手的方式来总结它。欢迎提出建议。

我正在做一个真正不需要谷歌地图的项目，它只会为这个项目带来额外的开销。但是，我无法弄清楚如何在没有谷歌地图的情况下做到这一点......到目前为止。

如果我要将平面图的图形叠加层放入谷歌地图，我可以使用浏览器位置来估计用户位置。对于这个，它是一个非常大的地方，因此存在一些精度差的空间。

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

我可以使用正方形的图像靠近，因为它的顶部是水平和垂直的，因为这会限制我的区域。但是由于世界上没有一个是这样工作的，所以我需要一个不是正方形的区域才能显示为正方形。我真的在数学上苦苦挣扎。

Here's what I'm trying to do!

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

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

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

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-和LatLon-库

一张图便于理解：

初步计算一些值：

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

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

计算如下：

• 交叉路口-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进行计算）