qiankun / Vue3 项目中，使用百度地图拾取经纬度

原创

已于 2022-07-04 16:21:06 修改 · 561 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#qiankun #百度地图 #跨域

于 2021-10-11 18:31:42 首次发布

本文介绍了如何在基于qiankun的Vue3项目中集成百度地图，实现地图组件的添加和使用，同时解决跨域问题。关键步骤包括在public文件夹引入地图资源，添加地图组件到页面，以及配置qiankun忽略微应用的地图资源，确保正常运行。

1. 想要的效果

2. 在 qiankun 中使用地图的实现步骤

2.1 引入地图资源

2.2 添加地图组件

2.3 使用地图组件

2.4 引入地图资源后，在基座中出现跨域的解决方案

2.4.1 再次提醒，基座应用中，需要引入地图资源

2.4.2 忽略微应用的某些资源，让它们不被 qiankun 劫持处理

1. 想要的效果

2. 在 qiankun 中使用地图的实现步骤

2.1 引入地图资源

在 public > index.html 中引入地图链接（基座应用、微应用中都要引入）

注意：为了防止 AK值不能使用，需要针对自己的项目申请此项目专门的 AK值

<!-- 百度地图 -->
<script ignore src="https://api.map.baidu.com/getscript?v=3.0&ak=xxxx"></script>

引入位置，如下图所示：

2.2 添加地图组件

下方代码针对业务进行修改后，粘贴到项目中即可

<!-- vue 3 引入百度api -->
<template>
  <el-row>
    <el-col :span="10" class="el-form-item__content">
      <el-input v-model="value"></el-input>
    </el-col>
    <el-col :span="2"></el-col>
    <el-col :span="5">
      <el-form label-width="60px">
        <el-form-item label="经度">
          <el-input v-model="lng"></el-input>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="5">
      <el-form label-width="60px">
        <el-form-item label="纬度">
          <el-input v-model="lat"></el-input>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="1" class="col-interval"></el-col>
    <el-col :span="2" class="el-form-item__content">
      <el-button @click="handleClick">
        确定
      </el-button>
    </el-col>
  </el-row>
  <!-- 地图容器 -->
  <div :id="thsMapId" class="ths-map"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue';

export default defineComponent({
  props: {
    // 地图初始化需要的数据
    options: {
      type: Object,
      default: () => {},
    },
    // 地址
    address: {
      ty