Below you’ll find a quick demo on how to get GPS coordinates in your Ionic 4 project using Capacitor.
在下面,您将找到有关如何使用Capacitor在Ionic 4项目中获取GPS坐标的快速演示。
If you have not heard of Capacitor, it’s the replacement for Cordova from the Ionic team. It focuses on providing native functionality and plugins for Progressive Web Apps (PWAs), iOS and Android. It’s the future of hybrid mobile development.
如果您还没有听说过电容器,那么它将代替Ionic团队的Cordova。 它专注于为渐进式Web应用程序 (PWA),iOS和Android提供本机功能和插件。 这是混合移动开发的未来。
安装 (Installation)
Start by creating your Ionic project using the CLI:
首先使用CLI创建Ionic项目:
$ ionic start coordinates tabs --type=angular --capacitor
$ cd coordinates
设置电容器 (Setup Capacitor)
Next, add Capacitor to our newly created Ionic project and include the app name and app id (ex: com.example.app). We’ll use npx to accomplish that task:
接下来,将Capacitor添加到我们新创建的Ionic项目中,并添加应用名称和应用ID(例如:com.example.app)。 我们将使用npx完成该任务:
$ npx cap init coordinates com.example.app
Run Ionic build to get the www folder created:
运行Ionic build以创建www文件夹:
$ ionic build
You can add your platforms with:
您可以使用以下方式添加平台:
$ npx cap add ios
$ npx cap add android
Now, run ionic serve to build the app in your browser:
现在,运行ionic serve在浏览器中构建应用程序:
$ ionic serve
You should see the default ionic tabs dummy data. Open your project in your preferred text editor.
您应该看到默认的“离子”选项卡虚拟数据。 在您首选的文本编辑器中打开您的项目。
Open tab1.page.html
, delete everything inside the ion-content
tags and replace it with the markup below:
打开tab1.page.html
,删除ion-content
标签内的所有ion-content
然后将其替换为下面的标记:
<ion-card>
<ion-card-header>
<ion-card-title>Coordinates</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item>Latitude: {{ latitude }}</ion-item>
<ion-item>Longitude: {{ longitude }}</ion-item>
</ion-card-content>
</ion-card>
Above is just a quick Ionic card that prints out the coordinates. In your app, you probably want to plug these coordinates into another plugin or service, such as Google maps, weather, etc…
上面只是一张快速的Ionic卡,可以打印出坐标。 在您的应用中,您可能希望将这些坐标插入另一个插件或服务中,例如Google地图,天气等…
In the tab1.page.ts
file, import the geolocation
plugin from @capcitor/core
:
在tab1.page.ts
文件中,从@capcitor/core
导入geolocation
插件:
import { Geolocation} from '@capacitor/core';
Create a variable for longitude and latitude with a type of number:
使用数字类型为经度和纬度创建一个变量:
latitude: number;
longitude: number;
In the constructor, call our soon to be created function this.getLocataion()
:
在构造函数中,调用即将创建的函数this.getLocataion()
:
constructor() {
this.getLocation();
}
Now lets create that async getLocation
function and call the getCurrentPosition
promise on the Geolocation class we imported:
现在,让我们创建一个异步getLocation
函数,并在我们导入的Geolocation类上调用getCurrentPosition
:
async getLocation() {
const position = await Geolocation.getCurrentPosition();
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
}
In the code, we assign the latitude and longitude to our previously created variables. Your screen should look like this:
在代码中,我们将纬度和经度分配给我们先前创建的变量。 您的屏幕应如下所示:
And that’s it! Simple enough! Head over to the official docs to learn more about other methods available on the Geolocation
API like watchPosition
and addListener
as well as specific permission notes for usage with iOS and Android.
就是这样! 很简单! 转至官方文档,以了解更多有关Geolocation
API上可用的其他方法的信息,例如watchPosition
和addListener
以及适用于iOS和Android的特定权限说明。
翻译自: https://www.digitalocean.com/community/tutorials/ionic-capacitor-location