带方向箭头的地理位置 api

Posted 2023-02-23

【中文标题】带方向箭头的地理位置 api

【英文标题】：Geolocation api with direction arrow

【发布时间】：2013-11-05 02:37:36

【问题描述】：

我正在构建一个简单的基于 php 的越野导航网页，用于智能手机上，它将在 Google 地图上显示两个图标，一个是我当前的位置，一个是我的目的地。当我移动时，我的图标位置会自动更新。

完成基本工作的示例代码包括：This *** example 和 This tutorial.

我希望我的图标是一个指向我当前行走方向的箭头。方向将基于我以前的位置和我当前的位置。请问有人知道有什么方法可以实现吗？

一种粗略的方法是使用 8 个（或 16 个）图标，分别代表 N、S、E、W、NE...，然后选择与我的方向大致相符的图标，但我希望有更多的动态。

另一种选择是简单地在我去过的地方的地图上画一条路径。无论如何我都在考虑这样做，但也想要箭头。

为了明确我想要什么，This *** example 包含此代码以在地图上显示我当前位置的标记：

map = new google.maps.Map(document.getElementById("map_canvas"), 
zoom: 18,
center: new google.maps.LatLng(startPos.coords.latitude, startPos.coords.longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
);
var marker = new google.maps.Marker(
position: new google.maps.LatLng(startPos.coords.latitude, startPos.coords.longitude),
map: map
);

我想要一个指向我行走方向的箭头，而不是泪珠型标记。我会根据我以前的位置和我当前位置的纬度/经度来计算它指向的方向，但是我需要将代码插入到上面的代码中位置：...

这是基本的导航内容，所以我确信之前已经完成了。我只是找不到任何例子。 （我不想使用 Google 路线 API。它有使用限制，不太适合越野。）

【参考方案1】：

我自己没有尝试过，但 Google Maps javascript API 似乎为此提供了功能。您可以使用google.Maps.Symbol 对象。

使用 rotation 属性，您可以设置符号的旋转度数。您需要先从 API 中获取当前位置和目的地之间的角度。

使用 path 属性，您可以设置符号。 Google 已经实现了箭头符号，它们使用常量BACKWARD_CLOSED_ARROW、BACKWARD_OPEN_ARROW、FORWARD_CLOSED_ARROW 和FORWARD_OPEN_ARROW。

它似乎还支持符号的着色、缩放等，所以你可以用它做很多事情。我希望这些信息有所帮助。