在图像地图上显示用户的位置

Posted 2023-02-23

【中文标题】在图像地图上显示用户的位置

【英文标题】：Show user's location on image map

【发布时间】：2013-12-01 21:57:34

【问题描述】：

我现在正在为社区开发一个网站。他们有一个简单的 .png 图像绘制的社区地图。我可以获得用户的纬度/经度，如何在地图上放置一个标记，向用户显示他们的大致位置？基本上，当用户点击该页面时，我会显示地图的 .png 图像，但希望在他们的大致位置覆盖另一个市场。

谢谢！

【问题讨论】：

您可以为此使用 Google Maps api。 ***.com/questions/16356543/…

见developers.google.com/maps/documentation/javascript/…

【参考方案1】：

如果您不想使用谷歌地图，那么您将需要图像中某些点的坐标。理想情况下，如果您知道 PNG 图像左上角和右下角的坐标，那么您可以认为地球表面是一个矩形。由于这是一个社区，因此错误将不明显。然后你可以很容易地将坐标转换为图像高度、宽度的百分比。

例如，如果：

左上角是42.685085,23.321373 右下角是42.68029,23.329784 图片宽度为1000px，图片高度为1000px 用户位于：42.683571,23.324978

然后您可以轻松地进行数学运算 - 您的引脚需要放置在：[31.57455683%, 42.8605397693%]，前提是左上角是 [0%, 0%]，右下角是 [100%, 100%]。这意味着在此示例中，引脚指向 [316px, 429px]。

获取图像左上角和右下角的坐标非常重要，这样您就可以在这张临时地图上准确计算位置。同样重要的是，地图上对象的大小与真实对象的比例相同 - 否则尽管您的计算是正确的，但图钉可能看起来好像放错了位置。如果他们的地图完全错误，您将无能为力。

提示：您可以将他们的地图设为半透明，并将其放置在谷歌地图或同一区域的其他地图上，以便查看道路和建筑物是否匹配。尝试用错误的地图来做是浪费时间。

【讨论】：

帕维尔，感谢您提供的信息！您使用了什么计算方法？

这是一个简单的数学运算。您需要能够像 a * x/100 = b 这样计算 %。其中a 是地图的宽度，b 是您的点与地图边界之间的距离。您可以为 x 和 y 坐标计算此值，一切顺利

您好，在我的情况下，我有这个值，图像的宽度 = 800 和高度 = 600，图像的点击事件上的 (x, y) 坐标，左上角和右下角坐标坐标，我需要将（x，y）图像坐标转换为gps坐标，我知道这更像是一个数学问题，但我很困惑，我会感谢你的帮助。谢谢你！

好吧，费尔南多，在你的情况下，这是一个相反的过程。您需要将像素转换为坐标，但方法相同。您只需要知道图像左上角和右下角对应的 GPS 坐标即可。然后，当您单击图像并提取以像素为单位的 X 和 Y 偏移时，您可以轻松地将这些像素转换为 % 值。然后计算 GPS 偏移量（再次假设地图是矩形 - 对于小地图，误差可以忽略不计）。

解决问题的方法i.stack.imgur.com/TFEQ9.jpg w=((42.683571-42.685085)/(42.68029-42.685085)) * 1000 h=((23.324978-23.321373)/(23.329784)*23.3273) 1000 图片由@karelg 制作

【参考方案2】：

来自https://developer.mozilla.org的示例

<p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function geoFindMe() 
  var output = document.getElementById("out");

  if (!navigator.geolocation)
    output.innerhtml = "<p>Geolocation is not supported by your browser</p>";
    return;
  

  function success(position) 
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    output.appendChild(img);
  ;

  function error() 
    output.innerHTML = "Unable to retrieve your location";
  ;

  output.innerHTML = "<p>Locating…</p>";

  navigator.geolocation.getCurrentPosition(success, error);

</script> 

【讨论】：

您需要 API 密钥才能发出该请求