Vue前端：引用高德地图动态添加markers和标签

效果

显示的效果如下

实现过程

一些基础的设置参照了这篇文章，指路：https://blog.csdn.net/ActiveLi/article/details/102592797
接下来写一下我自己的操作
步骤如下：
1.在项目终端的下安装vue-amap包

npm install vue-amap --save

2.在项目的main文件内写入以下内容

import AMap from 'vue-amap'; //地图类
Vue.use(AMap);
AMap.initAMapApiLoader({ 
  key: '在高德上为此应用申请的key',// 高德key
  plugin: [// 插件集合 （插件按需引入）'AMap.Geolocation'
  'AMap.Geocoder',
  'AMap.Autocomplete',
  'AMap.PlaceSearch',
  'AMap.Scale',
  'AMap.OverView',
  'AMap.Geolocation',
  'AMap.ToolBar',
  'AMap.MapType',
  'AMap.PolyEditor',
  'AMap.CircleEditor'],//
  v: '1.4.4' //指定版本号
});

3.在需要的此地图vue页面的中加入

<template>
    <!-- 高德地图 -->
    <div :style="{width:'100%',height:'700px'}"><!-- zoom是变焦,key是v-for的属性:events="marker.events":label="marker.label"-->
      <el-amap ref="map" vid="amapDemo"  :center="center" :zoom="zoom" :plugin="plugin" class="amap-demo">
         <el-amap-marker
         v-for="(marker, i) in markers":key="i" :position="marker.position":label="marker.label">
         </el-amap-marker>
      </el-amap>
    </div>
</template>

4.在script标签中加入一下data和method（其中接口名和数据自行使用自己项目中的接口）

<script>
	//其他项目的依赖项需要自行引入
	import { AMapManager } from 'vue-amap';	
	  export default {
          data(){
              zoom: 15,
              center: [110.320554, 20.014452],//默认加载出来地图中心经纬度
              markers: [],//数组对象
          },
          methods:{
            getTrip(name,time){
              let condit = {
                insName:name,
                beginTime: (time != null) ? time[0] : null,
                endTime: (time!= null) ? time[1] : null
              };
            let data = JSON.stringify(condit);
            this.markers=[];
            if(condit.insName != null)
              this.$request.postToken(this,'/mng/assessSite/findTrip.do',{data}).then(res =>{
                res = JSON.parse(res.data.results);//JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
                //循环写入markers
                for(let i=0;i<res.length;i++)
                {
                  var marker = {
                      position:[res[i].lng , res[i].lat],
                      visible: true,
                      template: '<span>1</span>',
                      label:{content:res[i].assessSiteName}//地点名标签
                    }
                  this.markers.push(marker);//将创建的点标记添加到已有的地图实例：
                }
                }).catch(err=>{
                error(this,err);
                }).finally(()=>{
                this.dataLoading = false;
                });
              }
         },//method end
              
      }
</script>

以上。