显示用户坐标和触发事件

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米范围内时显示信息窗口

这有点棘手，因为有多种情况需要处理，你不希望infowindow在你的半径范围内移动时反复打开。

距离计算

我发现您的代码中有一个距离函数，但我建议您使用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");
    }
  }
});