显示用户坐标和触发事件

Question

我正在使用 Google Maps Utilities Library V3 中的地理位置标记脚本来显示用户的位置。

我想要实现的（我是 Google Maps API 的新手！）是：

• 显示用户当前坐标（例如，在页面某处的简单 CSS 容器中）

• 将事件连接到标记。我应该在用户关闭时触发。

感谢您的帮助！

Answer 1

要向用户显示坐标，您需要对 DOM 元素的引用。那么更新内容就很简单了。

页面上的 HTML

<div id="UserCoordinates">Waiting on GPS Position ...</div>

在脚本中

google.maps.event.addListener(GeoMarker, 'position_changed', function() {
  var UserPosition = this.getPosition();
  var DisplayElement = document.getElementById('UserCoordinates');
  if(UserPosition === null) {
    DisplayElement.innerHTML = 'Waiting on GPS Position...';
  } else {
    DisplayElement.innerHTML =
        'Current Position: ' + UserPosition.toUrlValue();
  }
});

这将在用户更改时向用户显示他们当前的位置。如果您要继续使用全屏地图，您可能希望将UserCoordinates div 实现为地图控件。 API Reference 对此有很好的概述和多个示例。

当用户在某个位置 X 米范围内时显示信息窗口

这有点棘手，因为要处理多种情况，并且您不希望信息窗口在您的半径范围内移动时重复打开。

距离计算

我看到您的代码中有一个距离函数，但我建议使用 API 的 Spherical Geometry library 中的一个。您只需要使用您的 api 脚本标签专门加载库：

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true_or_false">
</script>

然后你需要添加到position_changed事件处理器：

var IsWithinRadius = false; //assume they start outside of the circle
var RadiusInMeters = 1000; //within 1 km
var LocationOfInterest = map.getCenter();
google.maps.event.addListener(GeoMarker, 'position_changed', function() {
  var UserPosition = this.getPosition();
  var DisplayElement = document.getElementById('UserCoordinates');
  if(UserPosition === null) {
    DisplayElement.innerHTML = 'Waiting on GPS Position...';
    IsWithinRadius = false; //you don't know where they are
  } else {
    DisplayElement.innerHTML =
        'Current Position: ' + UserPosition.toUrlValue();
    var IsCurrentPositionInRadius =
        Math.abs(google.maps.geometry.spherical.computeDistanceBetween(
            UserPosition, LocationOfInterest)) <= RadiusInMeters;
    var JustEnteredRadius = !IsWithinRadius && IsCurrentPositionInRadius;
    IsWithinRadius = IsCurrentPositionInRadius;
    if(JustEnteredRadius) {
      //trigger action here.
      alert("Within raidus");
    }
  }
});