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

Show user's location on image map

本文关键字：地图 图像 位置 用户 显示      更新时间：2024-01-03

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

谢谢！

如果你不想使用谷歌地图，那么你需要图像中一些点的坐标。理想情况下，如果你知道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]。

非常重要的是，你要有图像左上角和右下角的坐标，这样你就可以准确地计算出这张即兴地图上的位置。同样重要的是，地图上物体的大小与真实物体的比例相同——否则，尽管你的计算是正确的，但大头针可能看起来好像放错地方了。如果他们的地图完全错了，你就无能为力。

提示：您可以使他们的地图半透明，并将其放置在谷歌地图或同一地区的其他地图上，以便查看道路和建筑物是否匹配。如果用一张错误的地图做这件事，那将是浪费时间。

示例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>
相关文章：