uniapp小程序使用高德地图实现地图

要在 Uniapp 小程序中使用高德地图，可以按照以下步骤操作：

1. 在高德地图开放平台注册账号，创建应用，获取应用的 App Key。

2. 在 Uniapp 项目中安装并引入 `@types/amap-wx` 和 `@types/amap-js-api` 类型文件。

3. 在 `pages.json` 配置文件中添加高德地图组件：

{
  "usingComponents": {
    "map": "/static/amap-wx/map"
  }
}

4. 在需要使用地图的页面中添加高德地图组件：

<map
  class="map"
  style="width: 100%; height: 100%;"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  scale="{{scale}}"
  markers="{{markers}}"
>
</map>

其中 `longitude` 和 `latitude` 分别为地图中心点的经纬度，`scale` 为地图缩放级别，`markers` 为标记点列表。

5. 在页面的 `.js` 文件中引入 `@types/amap-wx` 和 `@types/amap-js-api` 类型文件，并使用 `wx.createMapContext` 方法获取地图上下文，调用地图 API 实现相应功能。

import type { MapContext } from '@types/amap-wx';
import type { AMap } from '@types/amap-js-api';

Page({
  onLoad() {
    this.mapCtx = wx.createMapContext('map');
  },

  onReady() {
    this.mapCtx.getCenterLocation({
      success: (res: AMap.GetCenterLocationSuccessResult) => {
        console.log(res.longitude, res.latitude);
      },
      fail: (err: any) => {
        console.error(err);
      },
    });
  },
});

以上就是在 Uniapp 小程序中使用高德地图的基本步骤。具体的 API 使用方法可以参考高德地图开放平台的文档。