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

Question

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

谢谢!

Answer 1

如果您不想使用Google地图，那么您将需要图像中某些点的坐标。理想情况下，如果您知道PNG图像的左上角和右下角的坐标，则可以认为地球表面是一个矩形。由于这是一个邻域，因此错误将是不可察觉的。然后，您可以轻松地将坐标转换为图像高度、宽度的百分比。

例如，如果：

图像左上角是42.685085,23.321373

• the，右下角是42.68029,23.329784

• the，图像宽度是1000px

• the，图像高度是用户所在的位置：42.683571,23.324978

，42.683571,23.324978，

• ，1000px

然后你可以很容易地计算一下-你的pin需要放在：[31.57455683%, 42.8605397693%]，假设左上角是[0%, 0%]，右下角是[100%, 100%]。这意味着在本例中，引脚指向[316px, 429px]。

拥有图像左上角和右下角的坐标是非常重要的，这样您就可以在这张临时制作的地图上准确地计算位置。同样重要的是，地图上物体的大小要与真实物体的大小相同-否则，尽管你的计算是正确的，但大头针可能看起来好像放错了地方。如果他们的地图是完全错误的，你就不能做很多事情。

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

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>