vue使用百度地图

以前都是使用的高德地图，百度地图第一次玩，但是有了高德地图的基础，应该实现不难，但是依然不可避免的踩了很多坑，现在拿出来纪录一下

• 地图引入
  • 和高德一样，可以直接在vue的index.html中引入百度地图的js文件，至于这个key，可以看看文档是怎么来的，这一步一般没啥问题的，和文档走就是了

  <script
    type="text/javascript"
    src="http://api.map.baidu.com/api?v=2.0&ak=你的key值"
  ></script>

• 页面展示
  • 相信大部分人，肯定不会像文档一样，将引入的JS文件放在当前页面，比如用vue，肯定会将文件引入到public里面的index.html中，然后再去地图页面再进行正常的业务逻辑书写

// public/index.html
// 引入地图js文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key值"></script>

// 组件页   Amap.vue
<!--
 * @Author: zhangrongkai
 * @Date: 2022-06-13 16:20:07
 * @LastEditors: Zhang Rong Kai
 * @LastEditTime: 2022-06-14 18:23:53
 * @Description: gps地图弹窗
-->
<template>
  <div>
    <el-dialog
      title="申请时的GPS地址"
      :visible.sync="gpsDialogVisible"
      width="60%"
    >
      <div id="allmap" style="width: 1110px; height: 500px"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    addressObj: {
      type: String
    }
  },
  data() {
    return {
      gpsDialogVisible: false,
      map: null
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleClose() {
      this.$emit('closeGpsDialog');
    },
    createAMap() {
      const addList = this.addressObj.split(',');
      // 百度地图API功能
      this.map = new window.BMap.Map('allmap');
      const point = new window.BMap.Point(
        Number(addList[0]),
        Number(addList[1])
      );
      // 创建Map实例
      this.map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别

      const marker = new window.BMap.Marker(point); // 创建标注
      this.map.addOverlay(marker);
      this.map.addEventListener('click', (e) => {
        console.log(e);
      });
      this.map.enableScrollWheelZoom(true);
    }
  },
};
</script>

<style scoped lang="scss">
.map {
  width: 700px;
  height: 300px;
}
</style>

// 地图调用 index.vue
<template>
	<div @click="clickGps">
		<Amap ref="gpsDialog" :addressObj="customerInfo.applyAddress"/>
	<div>
</template>

import Amap from 'Amap.vue';

methods: {
	clickGps() {
		this.$refs.gpsDialog._data.gpsDialogVisible = true;
	    this.$nextTick(() => {
        	this.$refs.gpsDialog.createAMap();
      	});
	}
}

• 踩坑
• BMap报错error ‘BMap‘ is not defined

因为在index.html中引入了地图js，所以这个时候可以在window对象中找到BMap属性，如果按照官方的直接写，就会报错

var map = new BMap.Map('allmap'); // error ‘BMap‘ is not defined

解决方法一
var map = new window.BMap.Map('allmap');

解决方法二
// 在当前页面script外面定义一个
const { BMap } = window

var map = new BMap.Map('allmap');

• Cannot read property 'gc' of undefined

大概意思就是，地图的dom都没加载完，就开始运行方法了
试过网上修改生命周期调用、v-if、v-show，都没用
后面发现，我使用了el-dialog的弹窗，在vue中，弹窗是要先加载的，
然后我使用
nextTick()ref()配合使用然后完成了
详细见
clickGps()方法