Question

我正在为一个社区开设一个网站。他们有一个他们社区的绘制地图，只是一个.png图像。我可以让用户使用lat / lon，如何在地图上放置一个标记，向用户显示其一般位置？基本上，当用户点击该页面时，我会显示地图的.png图像，但希望在其一般位置覆盖另一个市场。

谢谢！

Answer 1

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

例如：if：

左上角是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>

在图像映射上显示用户的位置

2 个答案: