vue项目在el-dialog中循环生成高德地图组件并生成路线规划

项目场景：vue项目在el-dialog中循环生成高德地图组件

提示：这里简述项目相关背景：
项目需要在弹窗中展示不同数据源的多个路线规划信息，在实践中发现很多网上搜索不到的错误，特此记录一下

---

问题描述

仅展示最精简并符合我所需要的步骤
首先需要安装vue-amap插件：

npm i @amap/amap-jsapi-loader --save

---

其次需要在public文件夹下的index.html文件中增加高德地图静态资源以及配置安全密钥

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
...
<div id="app"></div>
<script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode:'在高德开放平台申请的安全密钥',  
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/loader.js"></script> 

然后就可以创建组件使用了

<template>
    <div class="home_div">
        <div :id="ComponmapId" class="container"></div>
        <div id="panel"></div>
    </div>
</template>
<script>
//导入插件
import AMapLoader from '@amap/amap-jsapi-loader';
//初始化
props: ['mapId','visible'],
data(){
    return{
        map: null,
    } 
},   
mounted() {
    this.initAMap() // 获取初始化数据
},
methods:{
        initAMap(){
            let _this = this
            if (this.visible) {
	            AMapLoader.load({
	                 key:'',  //在高德开放平台申请的的key
	                 version:"2.0",
	                 plugins:[
	                     'AMap.Driving', //在这里添加你需要的地图功能，例如鹰眼，比例尺，路线规划等等
	                 ],
	             }).then((AMap)=>{
	                 _this.map = new AMap.Map('地图元素id',{
	                     //设置地图容器id
	                     viewMode: "3D", //是否为3D地图模式
	                     zoom: 11, //初始化地图级别
	                     center:[113.00, 22.00], //初始化地图中心点位置
	                 });
	                 _this.getRoute();
	                 //在地图组件上需要使用的方法，都可以写在这里
	             }).catch(e=>{
	                 console.log(e);
	             })
	         }
        },
}

下面是我遇到的第一个坑
由于el-dialog不同于其他基础dom元素，当父组件中该el-dialog的visible.sync所绑定的值不为true时，地图组件会因为该元素不存在而无法创建地图组件，所以我们需要在父组件中给地图组件传一个布尔值，根据布尔值，再进行地图组件的初始化工作

父组件
<el-col :span="18">
    <Mapview
      :mapId="LngLatindex"
      :visible="transportVisible"
    ></Mapview>
  </el-col>

然后是我遇到的第二个坑，
由于之前使用固定的id值，所以导致页面在循环创建组件过程中，永远只会显示第一个组件的地图信息，所以id就不能使用固定值，可以将父组件中循环所使用的index传给子组件，之后，再在子组件中对id值进行处理，可以通过class给组件写样式，地图组件必须有宽高，要注意，如果组件的样式没有生效，那么地图实例也无法创建，切记切记检查子组件的样式名，是否与dom结构对应上

created(){
  this.ComponmapId = 'container'+this.mapId
},

地图创建完成后，即可开始路线规划工作，在methods中定义getRoute方法

getRoute() {
		 let _this = this
		 this.driving = new AMap.Driving({
		     // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
		     policy: AMap.DrivingPolicy.LEAST_TIME,
		     map: _this.map,
		     panel: "panel"
		 })
		 
		 this.driving.search(_this.startLngLat,_this.endLngLat, function(status, result) {
		     // result 即是对应的驾车导航信息
		     // console.log(result.routes[0]);
		     if (status === 'complete') {
		         console.log('绘制驾车路线完成');
		     } else {
		         console.log('获取驾车数据失败：' + result);
		     }
		     _this.dis = result.routes[0].distance//此处是该路线所计算出来的实际路程公里数
		 });
		},

网上大多数都是根据关键字确定起点终点，并进行路线规划，我就不做太多论述，我所使用的是根据地理坐标，完成定位，并规划路线，传值方式大同小异，包括高德开放文档也给出了很多方式，如果报 LngLat(NaN, NaN)，Pixel(NaN, NaN)这两个错，不妨打印检查一下传入的坐标值，是否规范，可以在传值时使用一次Number()类型转换，再有就是检查this指向