uniapp 获取map上下文使用

/**
* @author jh 5/8
* @description map组件使用-操作实例
*/
<template>
  <view class="container">
    <map
        id="map"
        class="map"
        show-location
        :polygons="polygons"
        :latitude="39.781892"
        :longitude="116.293413"
    >
    </map>
  </view>
</template>

<script setup lang="ts">
import {ref, getCurrentInstance } from "vue";
import {onReady} from "@dcloudio/uni-app";

const { proxy } = getCurrentInstance()
const polygons = ref([])
const testPolygons = [
  {
    points:
        [
          {latitude: 39.781892,longitude: 116.293413},
          {latitude: 39.787600,longitude: 116.391842},
          {latitude: 39.733187,longitude: 116.417932},
          {latitude: 39.704653,longitude: 116.338255}
        ],
    fillColor: '#FFCCFF',
    strokeWidth: 3,
    strokeColor: '#CC99CC',
    zIndex: 11},
  {
    points:
        [
          {latitude: 39.887600,longitude: 116.518932},
          {latitude: 39.781892,longitude: 116.518932},
          {latitude: 39.781892,longitude: 116.428932},
          {latitude: 39.887600,longitude: 116.428932}],
    fillColor: '#CCFFFF',
    strokeWidth: 5,
    strokeColor: '#CC0000',zIndex: 3}
]

polygons.value  = testPolygons

// map 实例使用 在页面中必须在onReady周期调用，在组件中必须在onMounted调用
onReady(()=> {
  // 创建地图实例 返回 map-context 上下文
  const mapContext = uni.createMapContext("map")

  /**
   * @description 获取当前地图中心的经纬度 返回的是 gcj02 坐标系
   * @param success type function 成功回调
   * @param fail type function 失败回调
   * @param complete type function 调用的回调
   */
  mapContext.getCenterLocation({
    success: (res)=>{
      console.log(res)
    },
    fail: (res)=>{
      console.log(res)
    },
    complete: (res)=>{
      console.log(res)
    }
  })

  /**
   * @description 将地图中心移动到当前定位点或指定点，需要配合map组件的show-location使用
   * @param longitude type number 经度
   * @param latitude type number 纬度
   * @param success 成功回调
   * @param fail 失败回调
   * @param complete 调用的回调
   */
  mapContext.moveToLocation({
    success: (res)=>{
      console.log(res)
    },
    fail: (res)=>{
      console.log(res)
    },
    complete: (res)=>{
      console.log(res)
    }
  })

//  腾讯地点云接口调用
  proxy.$get('https://apis.map.qq.com/place_cloud/table/list' +
      '?key=2JJBZ-QOZWJ-TGKFZ-DKP7U-JC6P2-QIBN6' +
      '&table_id=0p5xvzOI-PkmOi2uE1').then(
      res=> {
        console.log(res)
      }
  )

//  腾讯地点云接口调用
  proxy.$get('' +
      'https://apis.map.qq.com/place_cloud/data/list' +
      '?table_id=0p5xvzOI-PkmOi2uE1&orderby=id' +
      '&page_index=1' +
      '&page_size=20' +
      '&key=2JJBZ-QOZWJ-TGKFZ-DKP7U-JC6P2-QIBN6').then(
      res=> {
        console.log(res)
      }
  )

})

</script>

<style lang="scss">
.container{
  width: 100%;
  height: 100%;
  .map{
    height: 100vh;
    width: 100vw;
  }
}

</style>