显示您的位置
概述
了解如何在地图上查找和追踪您的设备位置。
应用程序可以使用 Locate 和 追踪 微件查找、追踪和显示设备的地理位置。这两个微件均使用 HTML5 Geolocation API 来查找设备的位置并提供更新。找到地理位置后，可缩放至该位置，显示一个图形，并随着位置的变化而变化。单击按钮后，Locate 微件可查找并缩放至您的当前位置，而 追踪 微件可在间隔时间内以动画形式展示您的位置视图。追踪 微件对于构建提供行驶方向和跟随路线的应用程序很有用。可在查找路径和方向教程中了解有关查找方向的更多信息。如果您想在当前位置附近查找餐厅和加油站等地点，请尝试查找地点教程。
在本教程中，您将构建一个应用程序以在地图上查找和追踪您的位置。
步骤
创建新 Pen
更改底图和地图位置
在主
function中，更新现有代码以使用geoscene-navigation底图。此底图针对导航进行了优化。将地图设置为缩小到世界范围。Change line Change line Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 显示您的位置</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Locate", "geoscene/widgets/Track", "geoscene/Graphic" ], function( geosceneConfig, Map, MapView, Locate, Track, Graphic ) { const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [-40, 28], zoom: 2 }); 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"); 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"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
查找您的地理位置
Locate 微件使用 HTML5 以查找您的设备位置并缩放地图。将此微件添加到地图以查找并显示您的当前位置。
在
require语句中，添加Locate微件模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可在主function中使用。保持模块引用和函数参数的顺序相同很重要。Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 显示您的位置</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Locate", "geoscene/widgets/Track", "geoscene/Graphic" ], function( geosceneConfig, Map, MapView, Locate, Track, Graphic ) { const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [-40, 28], zoom: 2 }); 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"); 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"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>在
function的代码末尾，创建Locate微件并将useHeadingEnabled设置为 false，这样即不会更改地图的旋转。使用goToOverride为微件提供您自己的自定义缩放功能。在此示例中，它将地图缩放到1500的比例。将微件添加到视图的左上角。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 显示您的位置</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Locate", "geoscene/widgets/Track", "geoscene/Graphic" ], function( geosceneConfig, Map, MapView, Locate, Track, Graphic ) { const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [-40, 28], zoom: 2 }); 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"); 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"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>运行应用程序并单击定位按钮以查找您的位置。地图应缩放至 1500 的比例。蓝色符号代表您的地理位置。您可以通过单击图形并单击弹出窗口上的
...来移除图形。
追踪您的位置
追踪 微件可动画化您的当前位置视图。可通过打开和关闭微件来激活追踪。默认情况下，它会根据您的行进方向自动旋转视图。您通常仅使用一个地理定位微件，因此移除 Locate 微件并添加 Track 微件。
在
require语句中，添加追踪和Graphic模块。Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 显示您的位置</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Locate", "geoscene/widgets/Track", "geoscene/Graphic" ], function( geosceneConfig, Map, MapView, Locate, Track, Graphic ) { const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [-40, 28], zoom: 2 }); 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"); 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"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>在主
function中，将Locate微件代码替换为追踪微件，并将图形设置为一个简单绿色符号，并将useHeadingEnabled设置为 false，这样地图视图就不会旋转了。将微件添加到视图的左上角。Change line Change line Change line Change line Change line Change line Change line Change line Change line Change line Change line Change line Change line Change line Change line Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>GeoScene API for JavaScript Tutorials: 显示您的位置</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Locate", "geoscene/widgets/Track", "geoscene/Graphic" ], function( geosceneConfig, Map, MapView, Locate, Track, Graphic ) { const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [-40, 28], zoom: 2 }); 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"); 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"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
运行应用程序
在 CodePen 中， 运行代码以显示地图。
单击左上角的 追踪 按钮。绿色符号代表您的位置。尝试通过移动到不同的位置来跟踪您的当前位置。请访问文档以了解有关地理位置追踪间隔和超时设置的更多信息。
下一步是什么？
要了解如何使用其他API 功能，请参阅以下教程：
解决方案
估计时间
10 分钟