@leolovesmile/capacitor-mapnavigation introduction

This capacitorjs plugin is to add the mapbox map navigation capability to hybrid applications.

该capacitorjs的插件主要是用于支撑在android app内提供内建的实时导航能力。导航能力的建设是基于mapbox的移动端sdk实现的。

目前暂时仅支持通过startNavigation方法的参数的directions字段，传入兼容mapbox directions API的路径结果来启动实时导航。

Install/安装

npm install @leolovesmile/capacitor-mapnavigation
npx cap sync

注意事项

插件使用到了mapbox的android sdk，虽然该sdk是开源的，但是仍然要依赖一些库和插件，根据mapbox的说明，需要做如下配置，才能使得您的capacitorjs插件在android studio内可以正常开发和运行。

• 首先，您要在mapbox的官网注册用户并申请token，分别获得一个public access token和一个secret access token(MAPBOX_DOWNLOADS_TOKEN)。此处的方法可以搜索相关文章作为参考，或者查看mapbox的官网说明，比较详细，此处不赘述。
• 在你的ionic工程生成的android项目的gradle.properties文件中新建一个配置项，其取值应为上一步创建的 secret access token 的值，类似如下配置（注意，取值应该使用你自己获取的token值）

MAPBOX_DOWNLOADS_TOKEN=YOUR_MAPBOX_DOWNLOADS_TOKEN

• 在你的app模块的strings.xml文件中增加下面的配置项，取值应为之前创建的 public access token：

<string name="mapbox_access_token">MAPBOX_ACCESS_TOKEN</string>

• 在AndroidManifest.xml文件中增加权限配置

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

• 在工程的 build.gradle 文件中增加maven仓库，参考如下（主要是maven部分的内容）

allprojects {
    repositories {
        google()
        jcenter()
        maven {
            url 'https://api.mapbox.com/downloads/v2/releases/maven'
            authentication {
                basic(BasicAuthentication)
            }
            credentials {
                // Do not change the username below.
                // This should always be `mapbox` (not your username).
                username = "mapbox"
                // Use the secret token you stored in gradle.properties as the password
                password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
            }
        }
    }
}

• 确保您的app模块的build.gradle配置的jdk是1.8、并且minSdkVersion为21或更高
• 接下来，就可以使用本插件了。参考调用代码如下：

import { Plugins } from '@capacitor/core'



const { MapNavigation } = Plugins



await MapNavigation.startNavigation({
    startLatitude: startLatitude,
    startLongitude: startLongitude,
    endLatitude: endLatitude,
    endLongitude: endLongitude,
    enableSimulate: true,
    directions: responseText
})

API

• startNavigation(...)
• checkPermissions()
• requestPermissions()
• Interfaces

startNavigation(...)

startNavigation(options: NavigationOptions) => any

| Param | Type | | ------------- | --------------------------------------------------------------- | | options | NavigationOptions |

Returns: any

checkPermissions()

checkPermissions() => any

Returns: any

requestPermissions()

requestPermissions() => any

Returns: any

Interfaces

NavigationOptions

| Prop | Type | | -------------------- | -------------------- | | startLatitude | number | | startLongitude | number | | endLatitude | number | | endLongitude | number | | enableSimulate | boolean | | directions | string |

PermissionStatus

| Prop | Type | | ------------------- | ------------------------------------------------------------------------- | | mapNavigation | "prompt" | "prompt-with-rationale" | "granted" | "denied" |