我认为这是询问此问题的最佳场所。
我正在尝试获取嵌入式Google Street View上任何点击点的标题和角度。
我知道并且可以获取的唯一信息是：
我在这里包括了一个具有简化测量的屏幕截图示例：
我最初只是认为您可以将视野除以像素宽度来获得每个像素的角度，但这更加复杂，我认为与投影到球体内部有关，其中相机位于球体的中心？
如何反向操作会更好...
澄清：目标不是将视图移动到单击点，而是提供有关单击点的信息。度每像素的方法不起作用，因为视口不是线性的。
这里的值仅为示例，但视野可以更大或更小（从[0.某些事情, 180]），中心不是固定的，它可以是范围内的任何值[0, 360]和垂直[-90, 90]。点[0，0]只是摄影师拍摄照片时的标题（水平度数）和俯仰（垂直度数），并不真正代表任何东西。
简而言之，本文末尾包含一个用于概念验证的JavaScript代码。
全景图像的标题和俯仰参数 h0 和 p0 对应于一个方向。通过使用相机的焦距 f 来缩放这个方向向量，可以得到视口中心在 (u0, v0) 处的 3D 坐标 (x0, y0, z0)：
x0 = f * cos( p0 ) * sin( h0 )
y0 = f * cos( p0 ) * cos( h0 )
z0 = f * sin( p0 )
du = u - u0 = u - w / 2
dv = v0 - v = h / 2 - v
首先需要找到在3D中视口的本地二维正交基。单位向量(ux, uy, uz)沿着x轴（随着方位角的增加向右）支持图像，向量(vx, vy, vz)沿着y轴（随着俯仰角的增加向上）支持图像。一旦确定了这两个向量，视口中与(du, dv)像素偏移匹配的点的三维坐标就很简单了：
x = x0 + du * ux + dv * vx
y = y0 + du * uy + dv * vy
z = z0 + du * uz + dv * vz
这个点的标题和倾角参数h和p如下：
R = sqrt( x * x + y * y + z * z )
h = atan2( x, y )
p = asin( z / R )
(ux, uy, uz) 和 (vx, vy, vz)，需要在(p0, h0) 处计算出仰角和方位角参数的偏导数，计算结果如下：vx = -sin( p0 ) * sin ( h0 )
vy = -sin( p0 ) * cos ( h0 )
vz = cos( p0 )
ux = sgn( cos ( p0 ) ) * cos( h0 )
uy = -sgn( cos ( p0 ) ) * sin( h0 )
uz = 0
其中 sgn( a ) 在 a >= 0 时为 +1，否则为 -1。
补码：
The focal length is derived from the horizontal field of view and the width of the image:
f = (w / 2) / Math.tan(fov / 2)
The reverse mapping from heading and pitch parameters to pixel coordinates can be done similarly:
(x, y, z) of the direction of the ray corresponding to the specified heading and pitch parameters,(x0, y0, z0) of the direction of the ray corresponding to the viewport center (an associated image plane is located at (x0, y0, z0) with an (x0, y0, z0) normal),du and dvdu and dv to absolute pixel coordinates.In practice, this approach seems to work similarly well on both square and rectangular viewports.
概念验证代码（在包含带有“全景”ID的大小画布元素的网页上调用onLoad()函数）
'use strict';
var viewer;
function onClick(e) {
viewer.click(e);
}
function onLoad() {
var element = document.getElementById("panorama");
viewer = new PanoramaViewer(element);
viewer.update();
}
function PanoramaViewer(element) {
this.element = element;
this.width = element.width;
this.height = element.height;
this.pitch = 0;
this.heading = 0;
element.addEventListener("click", onClick, false);
}
PanoramaViewer.FOV = 90;
PanoramaViewer.prototype.makeUrl = function() {
var fov = PanoramaViewer.FOV;
return "https://maps.googleapis.com/maps/api/streetview?location=40.457375,-80.009353&size=" + this.width + "x" + this.height + "&fov=" + fov + "&heading=" + this.heading + "&pitch=" + this.pitch;
}
PanoramaViewer.prototype.update = function() {
var element = this.element;
element.style.backgroundImage = "url(" + this.makeUrl() + ")";
var width = this.width;
var height = this.height;
var context = element.getContext('2d');
context.strokeStyle = '#FFFF00';
context.beginPath();
context.moveTo(0, height / 2);
context.lineTo(width, height / 2);
context.stroke();
context.beginPath();
context.moveTo(width / 2, 0);
context.lineTo(width / 2, height);
context.stroke();
}
function sgn(x) {
return x >= 0 ? 1 : -1;
}
PanoramaViewer.prototype.unmap = function(heading, pitch) {
var PI = Math.PI
var cos = Math.cos;
var sin = Math.sin;
var tan = Math.tan;
var fov = PanoramaViewer.FOV * PI / 180.0;
var width = this.width;
var height = this.height;
var f = 0.5 * width / tan(0.5 * fov);
var h = heading * PI / 180.0;
var p = pitch * PI / 180.0;
var x = f * cos(p) * sin(h);
var y = f * cos(p) * cos(h);
var z = f * sin(p);
var h0 = this.heading * PI / 180.0;
var p0 = this.pitch * PI / 180.0;
var x0 = f * cos(p0) * sin(h0);
var y0 = f * cos(p0) * cos(h0);
var z0 = f * sin(p0);
//
// Intersect the ray O, v = (x, y, z)
// with the plane at M0 of normal n = (x0, y0, z0)
//
// n . (O + t v - M0) = 0
// t n . v = n . M0 = f^2
//
var t = f * f / (x0 * x + y0 * y + z0 * z);
var ux = sgn(cos(p0)) * cos(h0);
var uy = -sgn(cos(p0)) * sin(h0);
var uz = 0;
var vx = -sin(p0) * sin(h0);
var vy = -sin(p0) * cos(h0);
var vz = cos(p0);
var x1 = t * x;
var y1 = t * y;
var z1 = t * z;
var dx10 = x1 - x0;
var dy10 = y1 - y0;
var dz10 = z1 - z0;
// Project on the local basis (u, v) at M0
var du = ux * dx10 + uy * dy10 + uz * dz10;
var dv = vx * dx10 + vy * dy10 + vz * dz10;
return {
u: du + width / 2,
v: height / 2 - dv,
};
}
PanoramaViewer.prototype.map = function(u, v) {
var PI = Math.PI;
var cos = Math.cos;
var sin = Math.sin;
var tan = Math.tan;
var sqrt = Math.sqrt;
var atan2 = Math.atan2;
var asin = Math.asin;
var fov = PanoramaViewer.FOV * PI / 180.0;
var width = this.width;
var height = this.height;
var h0 = this.heading * PI / 180.0;
var p0 = this.pitch * PI / 180.0;
var f = 0.5 * width / tan(0.5 * fov);
var x0 = f * cos(p0) * sin(h0);
var y0 = f * cos(p0) * cos(h0);
var z0 = f * sin(p0);
var du = u - width / 2;
var dv = height / 2 - v;
var ux = sgn(cos(p0)) * cos(h0);
var uy = -sgn(cos(p0)) * sin(h0);
var uz = 0;
var vx = -sin(p0) * sin(h0);
var vy = -sin(p0) * cos(h0);
var vz = cos(p0);
var x = x0 + du * ux + dv * vx;
var y = y0 + du * uy + dv * vy;
var z = z0 + du * uz + dv * vz;
var R = sqrt(x * x + y * y + z * z);
var h = atan2(x, y);
var p = asin(z / R);
return {
heading: h * 180.0 / PI,
pitch: p * 180.0 / PI
};
}
PanoramaViewer.prototype.click = function(e) {
var rect = e.target.getBoundingClientRect();
var u = e.clientX - rect.left;
var v = e.clientY - rect.top;
var uvCoords = this.unmap(this.heading, this.pitch);
console.log("current viewport center");
console.log(" heading: " + this.heading);
console.log(" pitch: " + this.pitch);
console.log(" u: " + uvCoords.u)
console.log(" v: " + uvCoords.v);
var hpCoords = this.map(u, v);
uvCoords = this.unmap(hpCoords.heading, hpCoords.pitch);
console.log("click at (" + u + "," + v + ")");
console.log(" heading: " + hpCoords.heading);
console.log(" pitch: " + hpCoords.pitch);
console.log(" u: " + uvCoords.u);
console.log(" v: " + uvCoords.v);
this.heading = hpCoords.heading;
this.pitch = hpCoords.pitch;
this.update();
}
这个答案不够精确，请看用户3146587的最新答案。
我不太擅长数学解释。我编写了一个示例并尝试解释代码中的步骤。当您单击图像中的某一点时，该点将成为图像的新中心。即使您没有明确要求此功能，但它非常适合说明效果。使用先前计算出的角度绘制新图像。
示例：JSFiddle
重要的部分是我使用弧度来计算“视野范围”的半径。在这种情况下，弧度是图像的宽度（在您的示例中为100）。
radius = radian / FOV
通过弧度、半径和鼠标位置的相对位置，我可以计算出从中心到鼠标位置变化的角度。
Center(50,50)
MousePosition(75/25)
RelativeMousePosition(25,-25)
当相对鼠标位置为25时，用于计算水平角度的弧度为50。
radius = 50 / FOV // we've calculated the radius before, it stays the same
当我加/减计算出的角度到实际角度时（根据左/右、上/下的情况），可以计算新的航向和俯仰角。请查看链接的JSFiddle以获得正确的行为。
tan( fov_y / 2 ) = ( h / 2 ) / f
tan( dtheta_y ) = dy / f
tan( dtheta_y ) = dy / ( ( h / 2 ) / tan( fov_y / 2 ) )
= 2 * dy * tan( fov_y / 2 ) / h
dtheta_y = atan( 2 * dy * tan( fov_y / 2 ) / h )
dy的像素的相对俯仰角，只需将其加到视口中心的俯仰角上即可得到绝对俯仰角（即theta_y = theta_y0 + dtheta_y）。dtheta_x = atan( 2 * dx * tan( fov_x / 2 ) / w )
dx的像素的相对标题角度。两个关系可以反转，以获得从相对方位/俯仰角到相对像素坐标的映射，例如：
dy = h tan( dtheta_y ) / ( 2 * tan( fov_y / 2 ) )
垂直和水平视场fov_y和fov_x由以下关系链接：
w / h = tan( fov_x / 2 ) / tan( fov_y / 2 )
所以：
fov_x = 2 * atan( w * tan( fov_y / 2 ) / h )
从视口中心的垂直和水平偏差dy和dx可以映射到绝对像素坐标：
x = w / 2 + dx
y = h / 2 - dy
概念验证fiddle
Martin Matysiak编写了一个JS库，实现了这个的反向操作（在特定标题/俯仰处放置标记）。我提到这一点是因为其他答案中的各种jsfiddle链接都已经404了，原始请求者添加了一条评论请求此内容，并且这个SO页面在相关搜索中排名靠前。
讨论它的博客文章位于https://martinmatysiak.de/blog/view/panomarker。
库本身位于https://github.com/marmat/google-maps-api-addons。
在http://marmat.github.io/google-maps-api-addons/上有文档和演示（查看http://marmat.github.io/google-maps-api-addons/panomarker/examples/basic.html和http://marmat.github.io/google-maps-api-addons/panomarker/examples/fancy.html以获取PanoMarker示例）。
lengthOfChord == diameter（即180°角），它就会失效。 - Tyler Eich