An open API service indexing awesome lists of open source software.

https://github.com/null-object-0000/capacitor-plugin-amap

使用高德开放平台 Android 地图 SDK 开发的 Capacitor 插件(短期内仅维护安卓端)。
https://github.com/null-object-0000/capacitor-plugin-amap

amap android capacitor

Last synced: 8 months ago
JSON representation

使用高德开放平台 Android 地图 SDK 开发的 Capacitor 插件(短期内仅维护安卓端)。

Awesome Lists containing this project

README

          

# @snewbie/capacitor-amap

Version License [![Publish Capacitor Android Plugin To NPM](https://github.com/null-object-0000/capacitor-plugin-amap/actions/workflows/capacitor-android-plugin-publish.yml/badge.svg)](https://github.com/null-object-0000/capacitor-plugin-amap/actions/workflows/capacitor-android-plugin-publish.yml)

参考 [Capacitor Community Google Maps](https://github.com/capacitor-community/google-maps) 实现方式完成使用 [高德开放平台 Android 地图 SDK](https://lbs.amap.com/api/android-sdk/gettingstarted) 开发的 Capacitor 插件(短期内仅维护安卓端)。

## Install

```bash
npm install @snewbie/capacitor-amap
npx cap sync
```

## API Keys

要在安卓平台上使用高德地图 SDK,需要申请一个 API Key。请参考 [高德地图 SDK 文档](https://lbs.amap.com/api/android-sdk/guide/create-project/get-key) 。

## Android(详细配置说明请参考 [高德地图 SDK 文档](https://lbs.amap.com/api/android-sdk/guide/create-project/dev-attention))

Android 版高德地图 SDK 要求您将 API 密钥添加到项目中的 AndroidManifest.xml 文件中。

```xml

```

要使用某些功能,还需要将以下权限添加到项目中的 AndroidManifest.xml 文件中:

```xml














```

## Usage

> 在 Android 上,地图在整个网络视图下呈现,并使用该组件在滚动事件期间管理其位置。这意味着,作为开发人员,您必须确保 Web 视图在所有层到最底层都是透明的。在典型的 Ionic 应用程序中,这意味着对 IonContent 和根 HTML 标记等元素设置透明度,以确保它可以被看到。如果你在 Android 上看不到你的地图,这应该是你检查的第一件事。

高德地图元素本身没有样式,所以你应该根据页面结构的布局对其进行样式设置。因为我们将视图渲染到这个槽中,所以元素本身没有宽度或高度,所以一定要明确设置这些宽度或高度。

```html


```

```css
.capacitor-map {
display: inline-block;
width: 275px;
height: 400px;
}
```

接下来,我们应该创建地图引用。这是通过从 Capacitor 插件导入 AMap 类并调用 create 方法,然后传入所需的参数来完成的。

```typescript
import { AMap } from '@snewbie/capacitor-amap';

const mapRef = document.getElementById('map');

const newMap = await AMap.create({
id: 'my-map', // Unique identifier for this map instance
element: mapRef, // reference to the capacitor-amap element
config: {

}
});
```

## 完整示例

### Vue

```html

import { onIonViewWillEnter, onIonViewWillLeave } from '@ionic/vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { AMap } from '@snewbie/capacitor-amap';

const mapRef = ref<HTMLElement | null>(null)
let newMap: Amap;

onMounted(async () => {
if (!mapRef.value) { return; }

newMap = await AMap.create({
id: 'main',
element: mapRef.value,
config: {

}
});
});

onIonViewWillEnter(async () => {
newMap?.show()
newMap?.enableTouch()
})

onIonViewWillLeave(async () => {
newMap?.hide()
newMap?.disableTouch()
})

onUnmounted(() => {
newMap?.destroy()
})

```

### 离线地图 UI 组件

Activity 在 SDK 内部实现,仅需要在工程 AndroidManifest.xml 中配置 site.snewbie.plugins.amap.extend.OfflineMapActivity 即可

```xml

```

```html

import { AMap } from '@snewbie/capacitor-amap';

await AMap.openOfflineMapActivity();

```

## API

* [`updatePrivacyShow(...)`](#updateprivacyshow)
* [`updatePrivacyAgree(...)`](#updateprivacyagree)
* [`setTerrainEnable(...)`](#setterrainenable)
* [`openOfflineMapActivity()`](#openofflinemapactivity)
* [`create(...)`](#create)
* [`showIndoorMap(...)`](#showindoormap)
* [`setMapType(...)`](#setmaptype)
* [`setTrafficEnabled(...)`](#settrafficenabled)
* [`destroy()`](#destroy)
* [`show()`](#show)
* [`hide()`](#hide)
* [`enableTouch()`](#enabletouch)
* [`disableTouch()`](#disabletouch)
* [`enableMyLocation()`](#enablemylocation)
* [`disableMyLocation()`](#disablemylocation)
* [`setMyLocationStyle(...)`](#setmylocationstyle)
* [`setUiSettings(...)`](#setuisettings)
* [`cameraUpdatePosition(...)`](#cameraupdateposition)
* [`cameraZoomTo(...)`](#camerazoomto)
* [`setMapStatusLimits(...)`](#setmapstatuslimits)
* [`setOnCameraChangeListener(...)`](#setoncamerachangelistener)
* [`setOnIndoorBuildingActiveListener(...)`](#setonindoorbuildingactivelistener)
* [`setOnInfoWindowClickListener(...)`](#setoninfowindowclicklistener)
* [`setOnMapClickListener(...)`](#setonmapclicklistener)
* [`setOnMapLoadedListener(...)`](#setonmaploadedlistener)
* [`setOnMapLongClickListener(...)`](#setonmaplongclicklistener)
* [`setOnMapTouchListener(...)`](#setonmaptouchlistener)
* [`setOnMarkerClickListener(...)`](#setonmarkerclicklistener)
* [`setOnMarkerDragListener(...)`](#setonmarkerdraglistener)
* [`setOnMultiPointClickListener(...)`](#setonmultipointclicklistener)
* [`setOnMyLocationChangeListener(...)`](#setonmylocationchangelistener)
* [`setOnPOIClickListener(...)`](#setonpoiclicklistener)
* [`setOnPolylineClickListener(...)`](#setonpolylineclicklistener)
* [Interfaces](#interfaces)
* [Type Aliases](#type-aliases)
* [Enums](#enums)

高德地图 SDK 的 JavaScript 接口。

### updatePrivacyShow(...)

```typescript
updatePrivacyShow(isContains: boolean, isShow: boolean) => Promise
```

更新隐私合规状态,需要在初始化地图之前完成。

| Param | Type | Description |
| ---------------- | -------------------- | -------------------------- |
| **`isContains`** | boolean | 隐私权政策是否包含高德开平隐私权政策 true是包含 |
| **`isShow`** | boolean | 隐私权政策是否弹窗展示告知用户 true是展示 |

**Since:** 0.0.2

--------------------

### updatePrivacyAgree(...)

```typescript
updatePrivacyAgree(isAgree: boolean) => Promise
```

更新同意隐私状态,需要在初始化地图之前完成。

| Param | Type | Description |
| ------------- | -------------------- | ----------------------- |
| **`isAgree`** | boolean | 隐私权政策是否取得用户同意 true是用户同意 |

**Since:** 0.0.2

--------------------

### setTerrainEnable(...)

```typescript
setTerrainEnable(isTerrainEnable: boolean) => Promise
```

是否打开地形图, 打开地形图之后,底图会变成3D模式,添加的点线面等覆盖物也会自动带有高程。注意:需要在MapView创建之前调用。

| Param | Type | Description |
| --------------------- | -------------------- | --------------- |
| **`isTerrainEnable`** | boolean | true为打开,默认false |

**Since:** 0.0.5

--------------------

### openOfflineMapActivity()

```typescript
openOfflineMapActivity() => Promise
```

启动离线地图组件。

**Since:** 0.0.7

--------------------

### create(...)

```typescript
create(options: CreateMapArgs, callback?: MapListenerCallback | undefined) => Promise
```

创建地图实例。

| Param | Type | Description |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| **`options`** | CreateMapArgs | - 创建地图的参数。 |
| **`callback`** | MapListenerCallback<MapReadyCallbackData> | |

**Returns:** Promise<AMap>

**Since:** 0.0.1

--------------------

### showIndoorMap(...)

```typescript
showIndoorMap(enable: boolean) => Promise
```

设置是否显示室内地图,默认不显示。注:如果打开了室内地图,会显示3D建筑物,即如果之前有设置不显示3D建筑物,3D建筑物也会被显示出来。

| Param | Type | Description |
| ------------ | -------------------- | --------------------- |
| **`enable`** | boolean | true:显示室内地图;false:不显示 |

**Since:** 0.0.5

--------------------

### setMapType(...)

```typescript
setMapType(type: MapType) => Promise
```

设置地图模式。

| Param | Type |
| ---------- | ------------------------------------------- |
| **`type`** | MapType |

**Since:** 0.0.5

--------------------

### setTrafficEnabled(...)

```typescript
setTrafficEnabled(enable: boolean) => Promise
```

设置是否打开交通路况图层。

| Param | Type | Description |
| ------------ | -------------------- | ----------- |
| **`enable`** | boolean | 是否打开交通路况图层。 |

**Since:** 0.0.5

--------------------

### destroy()

```typescript
destroy() => Promise
```

销毁地图实例。

**Since:** 0.0.1

--------------------

### show()

```typescript
show() => Promise
```

显示地图。

**Since:** 0.0.7

--------------------

### hide()

```typescript
hide() => Promise
```

隐藏地图。

**Since:** 0.0.7

--------------------

### enableTouch()

```typescript
enableTouch() => Promise
```

设置地图允许被触控。

**Since:** 0.0.1

--------------------

### disableTouch()

```typescript
disableTouch() => Promise
```

设置地图禁止被触控。

**Since:** 0.0.1

--------------------

### enableMyLocation()

```typescript
enableMyLocation() => Promise
```

设置启动显示定位蓝点。

**Since:** 0.0.5

--------------------

### disableMyLocation()

```typescript
disableMyLocation() => Promise
```

设置隐藏定位蓝点并不进行定位。

**Since:** 0.0.5

--------------------

### setMyLocationStyle(...)

```typescript
setMyLocationStyle(style: MyLocationStyle) => Promise
```

设置定位蓝点的Style。

| Param | Type |
| ----------- | ----------------------------------------------------------- |
| **`style`** | MyLocationStyle |

**Since:** 0.0.5

--------------------

### setUiSettings(...)

```typescript
setUiSettings(args: UiSettings) => Promise
```

设置地图内置UI及手势控制器。

| Param | Type |
| ---------- | ------------------------------------------------- |
| **`args`** | UiSettings |

**Since:** 0.0.5

--------------------

### cameraUpdatePosition(...)

```typescript
cameraUpdatePosition(args: CameraPosition) => Promise
```

给地图设置一个新的状态。

| Param | Type | Description |
| ---------- | --------------------------------------------------------- | ----------- |
| **`args`** | CameraPosition | 新的地图状态。 |

**Since:** 0.0.6

--------------------

### cameraZoomTo(...)

```typescript
cameraZoomTo(zoom: Number) => Promise
```

设置地图缩放级别。

| Param | Type | Description |
| ---------- | ----------------------------------------- | ------------------------------------------------- |
| **`zoom`** | Number | 地图缩放级别。地图的缩放级别一共分为 17 级,从 3 到 19。数字越大,展示的图面信息越精细。 |

**Since:** 0.0.6

--------------------

### setMapStatusLimits(...)

```typescript
setMapStatusLimits(args: MapStatusLimits) => Promise
```

设置地图显示范围,无论如何操作地图,显示区域都不能超过该矩形区域。

| Param | Type |
| ---------- | ----------------------------------------------------------- |
| **`args`** | MapStatusLimits |

**Since:** 0.0.6

--------------------

### setOnCameraChangeListener(...)

```typescript
setOnCameraChangeListener(callback?: MapListenerCallback | undefined) => Promise
```

设置地图状态的监听接口。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0.0.2

--------------------

### setOnIndoorBuildingActiveListener(...)

```typescript
setOnIndoorBuildingActiveListener(callback?: MapListenerCallback | undefined) => Promise
```

设置室内地图状态监听接口。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0.0.2

--------------------

### setOnInfoWindowClickListener(...)

```typescript
setOnInfoWindowClickListener(callback?: MapListenerCallback | undefined) => Promise
```

设置marker的信息窗口点击事件监听接口。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0.0.2

--------------------

### setOnMapClickListener(...)

```typescript
setOnMapClickListener(callback?: MapListenerCallback | undefined) => Promise
```

设置地图点击事件监听接口。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0.0.2

--------------------

### setOnMapLoadedListener(...)

```typescript
setOnMapLoadedListener(callback?: MapListenerCallback | undefined) => Promise
```

设置地图加载完成监听接口。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0.0.2

--------------------

### setOnMapLongClickListener(...)

```typescript
setOnMapLongClickListener(callback?: MapListenerCallback | undefined) => Promise
```

设置地图长按事件监听接口。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0.0.2

--------------------

### setOnMapTouchListener(...)

```typescript
setOnMapTouchListener(callback?: MapListenerCallback | undefined) => Promise
```

设置地图触摸事件监听接口。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0.0.2

--------------------

### setOnMarkerClickListener(...)

```typescript
setOnMarkerClickListener(callback?: MapListenerCallback | undefined) => Promise
```

设置marker点击事件监听接口。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0.0.2

--------------------

### setOnMarkerDragListener(...)

```typescript
setOnMarkerDragListener(callback?: MapListenerCallback | undefined) => Promise
```

marker拖动事件监听接口。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0.0.2

--------------------

### setOnMultiPointClickListener(...)

```typescript
setOnMultiPointClickListener(callback?: MapListenerCallback | undefined) => Promise
```

设置海量点单击事件监听。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0..2

--------------------

### setOnMyLocationChangeListener(...)

```typescript
setOnMyLocationChangeListener(callback?: MapListenerCallback | undefined) => Promise
```

设置用户定位信息监听接口。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0.0.2

--------------------

### setOnPOIClickListener(...)

```typescript
setOnPOIClickListener(callback?: MapListenerCallback | undefined) => Promise
```

设置底图poi点击事件监听接口。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0.0.2

--------------------

### setOnPolylineClickListener(...)

```typescript
setOnPolylineClickListener(callback?: MapListenerCallback | undefined) => Promise
```

设置polyline点击事件监听接口。

| Param | Type |
| -------------- | ------------------------------------------------------------------------------ |
| **`callback`** | MapListenerCallback<any> |

**Since:** 0.0.2

--------------------

### Interfaces

#### CreateMapArgs

| Prop | Type | Description | Default | Since |
| ----------------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------ | ----- |
| **`id`** | string | 地图实例的唯一标识符。 | | 0.0.1 |
| **`config`** | AMapConfig | 地图的初始配置设置。 | | 0.0.1 |
| **`element`** | HTMLElement | The DOM element that the Google Map View will be mounted on which determines size and positioning. | | 0.0.1 |
| **`forceCreate`** | boolean | 如果已经存在具有提供的`id`的地图,则销毁并重新创建地图实例。 | false | 0.0.1 |

#### AMapConfig

| Prop | Type | Description | Default | Since |
| --------------------------- | --------------------------------------------------------- | ------------------------------------------------------- | -------------------------------------- | ----- |
| **`width`** | number | Override width for native map. | | 0.0.1 |
| **`height`** | number | Override height for native map. | | 0.0.1 |
| **`x`** | number | Override absolute x coordinate position for native map. | | 0.0.1 |
| **`y`** | number | Override absolute y coordinate position for native map. | | 0.0.1 |
| **`devicePixelRatio`** | number | Override pixel ratio for native map. | 1.00f | 0.0.1 |
| **`logoPosition`** | LogoPosition | 设置“高德地图”Logo的位置。 | LOGO_POSITION_BOTTOM_LEFT | 0.0.5 |
| **`mapType`** | MapType | 设置地图模式,默认普通地图。 | MAP_TYPE_NORMAL | 0.0.5 |
| **`scaleControlsEnabled`** | boolean | 设置地图是否显示比例尺,默认为false。 | false | 0.0.5 |
| **`zoomControlsEnabled`** | boolean | 设置地图是否允许缩放。默认为true。 | true | 0.0.5 |
| **`compassEnabled`** | boolean | 设置指南针是否可用。默认为启用。 | true | 0.0.5 |
| **`scrollGesturesEnabled`** | boolean | 设置地图是否可以手势滑动。默认为true。 | true | 0.0.5 |
| **`zoomGesturesEnabled`** | boolean | 设置地图是否可以通过手势进行缩放。默认为true。 | true | 0.0.5 |
| **`tiltGesturesEnabled`** | boolean | 设置地图是否可以通过手势倾斜(3D效果),默认为true。 | true | 0.0.5 |
| **`rotateGesturesEnabled`** | boolean | 设置地图是否可以通过手势进行旋转。默认为true. | true | 0.0.5 |
| **`cameraOptions`** | CameraPosition | 设置地图初始化时的地图状态, 默认地图中心点为北京天安门,缩放级别为 10.0f。 | | |

#### CameraPosition

相机位置,这个类包含了所有的可视区域的位置参数。

| Prop | Type | Description |
| ------------- | ----------------------------------------- | ---------------------------------------- |
| **`target`** | LatLng | 目标位置的屏幕中心点经纬度坐标。 |
| **`zoom`** | number | 目标可视区域的缩放级别。 |
| **`tilt`** | number | 目标可视区域的倾斜度,以角度为单位。 |
| **`bearing`** | number | 可视区域指向的方向,以角度为单位,从正北向逆时针方向计算,从0 度到360 度。 |

#### LatLng

存储经纬度坐标值的类,单位角度。

| Prop | Type | Description |
| --------------- | ------------------- | ----------- |
| **`latitude`** | number | 纬度 (垂直方向) |
| **`longitude`** | number | 经度 (水平方向) |

#### MapReadyCallbackData

| Prop | Type |
| ----------- | ------------------- |
| **`mapId`** | string |

#### MyLocationStyle

| Prop | Type | Description |
| -------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------- |
| **`interval`** | number | 设置连续定位模式下的定位间隔,只在连续定位模式下生效,单次定位模式下不会生 |
| **`myLocationType`** | MyLocationType | 设置定位蓝点展现模式。 |
| **`showMyLocation`** | boolean | 设置是否显示定位小蓝点,用于满足只想使用定位,不想使用定位小蓝点的场景,设置false以后图面上不再有定位蓝点的概念,但是会持续回调位置信息。 |

#### UiSettings

地图内置UI及手势控制器。

| Prop | Type | Description | Default |
| ----------------------------- | -------------------- | ----------- | ------------------ |
| **`myLocationButtonEnabled`** | boolean | 设置定位按钮是否可见。 | false |

#### Number

An object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.

| Method | Signature | Description |
| ----------------- | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **toString** | (radix?: number \| undefined) => string | Returns a string representation of an object. |
| **toFixed** | (fractionDigits?: number \| undefined) => string | Returns a string representing a number in fixed-point notation. |
| **toExponential** | (fractionDigits?: number \| undefined) => string | Returns a string containing a number represented in exponential notation. |
| **toPrecision** | (precision?: number \| undefined) => string | Returns a string containing a number represented either in exponential or fixed-point notation with a specified number of digits. |
| **valueOf** | () => number | Returns the primitive value of the specified object. |

#### MapStatusLimits

通过指定的两个经纬度坐标(左下、右上)构建的一个矩形区域

| Prop | Type | Description |
| --------------- | ----------------------------------------- | ----------- |
| **`southwest`** | LatLng | 西南角坐标。 |
| **`northeast`** | LatLng | 东北角坐标。 |

### Type Aliases

#### MapListenerCallback

The callback function to be called when map events are emitted.

(data: T): void

### Enums

#### LogoPosition

| Members | Value | Description |
| --------------------------------- | -------------- | ----------- |
| **`LOGO_POSITION_BOTTOM_LEFT`** | 0 | 左下 |
| **`LOGO_POSITION_BOTTOM_CENTER`** | 1 | 底部居中 |
| **`LOGO_POSITION_BOTTOM_RIGHT`** | 2 | 右下 |

#### MapType

| Members | Value | Description |
| ------------------------- | -------------- | ----------- |
| **`MAP_TYPE_NORMAL`** | 1 | 普通地图 |
| **`MAP_TYPE_SATELLITE`** | 2 | 卫星地图 |
| **`MAP_TYPE_NIGHT`** | 3 | 黑夜地图 |
| **`MAP_TYPE_NAVI`** | 4 | 导航地图 |
| **`MAP_TYPE_BUS`** | 5 | 公交地图 |
| **`MAP_TYPE_NAVI_NIGHT`** | 6 | 导航黑夜地图 |

#### MyLocationType

| Members | Value | Description |
| --------------------------------------------- | -------------- | --------------------------------------------------------- |
| **`LOCATION_TYPE_SHOW`** | 0 | 只定位一次。 |
| **`LOCATION_TYPE_LOCATE`** | 1 | 定位一次,且将视角移动到地图中心点。 |
| **`LOCATION_TYPE_FOLLOW`** | 2 | 连续定位、且将视角移动到地图中心点,定位蓝点跟随设备移动。(1秒1次定位) |
| **`LOCATION_TYPE_MAP_ROTATE`** | 3 | 连续定位、且将视角移动到地图中心点,地图依照设备方向旋转,定位点会跟随设备移动。(1秒1次定位) |
| **`LOCATION_TYPE_LOCATION_ROTATE`** | 4 | 连续定位、且将视角移动到地图中心点,定位点依照设备方向旋转,并且会跟随设备移动。(1秒1次定位)默认执行此种模式。 |
| **`LOCATION_TYPE_LOCATION_ROTATE_NO_CENTER`** | 5 | 连续定位、蓝点不会移动到地图中心点,定位点依照设备方向旋转,并且蓝点会跟随设备移动。 |
| **`LOCATION_TYPE_FOLLOW_NO_CENTER`** | 6 | 连续定位、蓝点不会移动到地图中心点,并且蓝点会跟随设备移动。 |
| **`LOCATION_TYPE_MAP_ROTATE_NO_CENTER`** | 7 | 连续定位、蓝点不会移动到地图中心点,地图依照设备方向旋转,并且蓝点会跟随设备移动。 |