显示您的位置

概览 ​

了解如何在地图上查找和跟踪您的设备位置。

应用程序可以使用 Locate 和 Track 微件查找、追踪和显示设备的地理位置。这两个微件均使用 HTML5 Geolocation API 来查找设备的位置并提供更新。找到地理位置后，可缩放至该位置，显示图形并跟踪位置变化。Locate 微件会查找并缩放至当前位置，而 Track 微件会每隔一段时间将视图动画化到当前位置。Track 微件对于构建提供行驶方向和遵循路径的应用程序非常有用。了解更多关于查找方向的信息，请参阅查找路径和方向教程。如果想查找附近的服务设施，如餐馆和加油站等，可以尝试查找地点教程。

在本教程中，将构建一个在地图上查找和跟踪您的位置的应用程序。

步骤 ​

创建新 Pen ​

1. 开始前，请先完成显示地图教程。

查找地理位置 ​

Locate 微件使用 HTML5 来查找设备位置并缩放地图。通过添加此微件可以查找并显示当前位置。

1. 在 require 语句中，添加 Locate 微件模块。

   更多内容

   GeoScene Maps SDK for JavaScript 提供有 AMD 模块和 ES 模块，但本教程基于 AMD。AMD require 函数使用引用来确定加载哪些模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

   js

       <script>
           require([
               "geoscene/config",
               "geoscene/Map",
               "geoscene/views/MapView",
               "geoscene/widgets/Locate",
           ], function(
               geosceneConfig,
               Map,
               MapView,
               Locate,
           ) {

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   

2. 在主 function 代码的末尾，创建 Locate 微件并将 useHeadingEnabled 设置为 false，禁止更改地图的旋转。使用 goToOverride 为微件自定义缩放功能。此示例中，它会将地图缩放到 1500 的比例。然后将微件添加到视图的左上角。

   js

   const locate = new Locate({
       view: view,
       useHeadingEnabled: false,
       goToOverride: function(view, options) {
           options.target.scale = 1500;
           return view.goTo(options.target);
       }
   });
   view.ui.add(locate, "top-left");

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

3. 运行应用程序并单击定位按钮，便可以查找您的位置。地图会缩放至 1500 的比例。蓝色符号代表您的地理位置。可通过单击图形并在弹出窗口上单击 ... 来移除图形。

   注

   如果未允许浏览器使用位置，浏览器将在访问设备位置之前请求用户许可。必须批准此请求才能使 Track 微件正常工作。如果您使用的是 CodePen，则微件可能无法在 Editor 视图中工作。如果发生这种情况，请更改为 Debug 视图并再次运行应用程序。

跟踪位置 ​

Track 微件可将视图动画至当前位置。通过打开和关闭微件来激活追踪。默认情况下，它将根据行进方向自动旋转视图。通常我们同时只使用一个地理位置微件，因此在此移除 Locate 微件并添加 Track 微件。

1. 在 require 语句中，添加 Track 和 Graphic 模块。

   js

       <script>
           require([
               "geoscene/config",
               "geoscene/Map",
               "geoscene/views/MapView",
               "geoscene/widgets/Locate",
   
               "geoscene/widgets/Track",
               "geoscene/Graphic"
   
           ], function(
               geosceneConfig,
               Map,
               MapView,
               Locate,
   
               Track,
               Graphic
           ) {

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   

2. 在主 function 中，使用 Track 微件替换 Locate 微件代码，将图形设置为简单的绿色符号，并将 useHeadingEnabled 设置为 false，这样地图视图就不会旋转。将微件添加到视图的左上角。

   js

       const track = new Track({
           view: view,
           graphic: new Graphic({
               symbol: {
                   type: "simple-marker",
                   size: "12px",
                   color: "green",
                   outline: {
                       color: "#efefef",
                       width: "1.5px"
                   }
               }
           }),
           useHeadingEnabled: false
       });
       view.ui.add(track, "top-left");

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   

运行应用程序 ​

在 CodePen 中，运行代码以显示地图。

单击左上角的 Track 按钮。绿色符号表示您的位置。尝试通过移动到不同的位置来跟踪您的当前位置。请访问文档以了解有关地理位置跟踪间隔和超时设置的更多信息。

下一步是什么？ ​

要了解如何使用其他API 功能，请参阅以下教程：

• 查找路径和方向

• 搜索地址