Question

我为这个模糊的标题道歉，我真的无法找到一种方法来总结它。建议非常受欢迎。

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

如果我要将平面图的图形叠加放入谷歌地图，我可以使用浏览器位置来估算用户位置。对于这个，它是一个非常大的地方，所以存在一些不太准确的空间。

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

我能够使用正方形的图像来接近，因为两侧的顶部是水平和垂直的，因为这会影响我的区域。但由于这个世界上没有一个像这样，我需要一个不平方的区域才能显得平方。我真的在数学上苦苦挣扎。

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

就像我说的那样，我确信这可以做到，但我还没有能够找到它的数学。它让我发疯了。

这是我的代码所做的魔术。函数获取浏览器坐标并将它们发送到初始化函数。然后基于我自己之前的映射，我有我试图映射的图像的界限。我使用hasrsine formuls试图获得用户点的高度和宽度（因为地图曲线，它在其他任何地方都是不准确的）位置，然后是从顶部和左边的距离点，然后从左/上取距离并将其除以宽度/高度，以获得它们离左/上到多远的位置百分比。这个想法，虽然我不能让它超级准确，但在这个例子中起作用，因为图像在地图上水平排列。我的问题是如何在地图上旋转图像时计算这些距离？我无法弄清楚数学。

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

更好理解的图片： enter image description here

最初计算一些值：

轴承（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)
交点-γ：
LatLon.intersection(sw, bearingNWtoNE, target,bearingNWtoSW)

现在计算border-north到target和border-west到target的距离的百分比值：

border-north to target：
((distanceNWtoNE-(target.distanceTo(intersection-x)))*100)/distanceNWtoNE
border-west to target：
((distanceNWtoSW-(target.distanceTo(intersection-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;
};

<强>演示： http://jsfiddle.net/doktormolle/nsbqpcvg/embedded/result/
将突出显示的平面图放置在google-map上以查看计算结果（google-Maps-API仅用于演示，计算将在不使用Maps-API的情况下完成）

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

1 个答案: