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

Question

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

谢谢！

Answer 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]。

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

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

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