uni-app H5端之腾讯地图的使用和展示，页面的回显

腾讯地图的官网地址：https://lbs.qq.com/

注册登录账号，需要创建一个地图应用

主要关注两个地方一个是：应用管理->我的应用 配额管理->key额度

首先需要创建一个应用：

给应用添加一个key值，并且需要将额度赋予个这个key

有了这个key之后需要给key分配相关权限额度

接下需要打开Hbuild X编辑器进行配置管理

这里需要刚才分配好额度的key填进去

接下来需要对代码进行修改然完善功能

<script setup>
  import { ref, computed } from 'vue'
  // 组件 ref
  const popup = ref(null)
  // 文件提示
  const exceptionTime = computed(() => {
    return timePicker.value || '请选择'
  })
  // 异常日期
  const timePicker = ref('')
  // 上报位置数据
  const exceptionPlace = ref('')
  // 打开地图
  async function onLocationChoose() {
    try {
      // 获取位置
      const { address } = await uni.chooseLocation({})
      exceptionPlace.value = address
      console.log(address)
    } catch (err) {}
  }

  // 点击类型弹层确认按钮
  function onPopupConfirm() {
    popup.value.close()
  }

  // 打开弹层
  function onPopupOpen() {
    popup.value.open()
  }
</script>

<template>
  <view class="page-container">
    <scroll-view class="scroll-view" scroll-y>
      <view style="margin: 30rpx" class="scroll-view-wrapper">
        <uni-list :border="false">
          <uni-list-item show-arrow title="异常时间">
            <template v-slot:footer>
              <uni-datetime-picker v-model="timePicker">
                <view class="picker-value">{{ exceptionTime }}</view>
              </uni-datetime-picker>
            </template>
          </uni-list-item>

          <uni-list-item
            show-arrow
            clickable
            ellipsis="1"
            @click="onLocationChoose"
            title="上报位置"
            :right-text="exceptionPlace || '请选择'"
          />
          <uni-list-item
            show-arrow
            clickable
            @click="onPopupOpen"
            title="异常类型"
            rightText="请选择"
          />
          <uni-list-item direction="column" title="异常描述">
            <template v-slot:footer>
              <view class="textarea-wrapper">
                <textarea
                  class="textarea"
                  placeholder="请输入异常描述"
                ></textarea>
                <view class="words-count">0/50</view>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item
            :border="false"
            style="margin-top: -30rpx"
            direction="column"
            title="上传图片（最多6张）"
          >
            <template v-slot:footer>
              <uni-file-picker limit="6"></uni-file-picker>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </scroll-view>
    <view class="fixbar">
      <button class="button disable">提交</button>
    </view>
    <!-- 异常类型弹层 -->
    <uni-popup ref="popup" :mask-click="false" type="bottom">
      <uni-list class="popup-action-sheet">
        <uni-list-item>
          <template v-slot:header>
            <view class="header">选择类型</view>
          </template>
        </uni-list-item>
        <uni-list-item title="发动机启动困难">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="不着车，漏油">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="照明失灵">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="排烟异常、温度异常">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="其他问题">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item>
          <template v-slot:body>
            <button @click="onPopupConfirm" class="button">确定</button>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>

这里使用uni-uni.chooseLocation({})内置的方法展示地图

这里触发点击事件将地图的地址返回并且回显到表格当中

到这儿，地图展示回显的功能就完成了