首先 依旧是安装vue高德地图插件

npm 安装
推荐 npm 安装。

npm install vue-amap --save

import VueAMap from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'your amap key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

然后是html

<div class="amap-page-container">

      <el-amap
        vid="amapDemo"  
        :center="center"
        :zoom="zoom"  
        class="amap-demo">
        <el-amap-marker v-for="marker in markers" :position="marker.position" :events="marker.events"></el-amap-marker>
        <el-amap-info-window v-if="window" :position="window.position" :visible="window.visible" :content="window.content"></el-amap-info-window>
      </el-amap>
    </div>

然后是样式

整个地图大小的样式
.amap-demo {
      height: 300px;
    }

这个是信息弹窗的样式
.prompt {
  background: white;
  width: 100px;
  height: 30px;
  text-align: center;
}

重点 是 js 可以写在methods里面的一个函数里 然后再在ceated或者mounted里面调用最好是mounted毕竟页面加载之后调用

	data里面的return数据
	data() {
			
            let self = this;       //this重定向
        return {
            zoom: 16,          //地图缩放
            center: [114.42202, 30.47805],            // 默认的地图显示位置
            markers: [],	            //地图上的圆点显示的坐标数组和事件等等
            windows: [],         //地图上的信息弹窗的坐标和事件等等
            window: '',            //通过下面的js设置来判断信息弹窗是否显示
            info:[],				//我用来存储获取的接口的数据
            ts:'',            //我用来存储获取的接口数据的条数
        };
        },





getlist(){
			//我获取接口数据要带的参数  不用在意
            let a = ''
            if(JSON.parse(localStorage.getItem('admin_info')) == null){
                a = ''
            }else{
                a= JSON.parse(localStorage.getItem('admin_info')).token
            }

			//vue里axios的post获取数据
            this.$axios({
                method:'post',
                url:this.api+'admin/screen_gps/index',
                data:{
                    token:a
                }
            }).then(res=>{
            //判断当返回的状态码为1时
                if(res.data.status == 1){
                    console.log(res.data.result.list)
                    this.ts = res.data.result.list.length;

					//开始配置地图js
                     let markers = [];
                    let windows = [];
					
					//获取数据长度（条数）
                    let num = res.data.result.list.length;
                    let self = this;            //this重定向

					//对数据数量进行循环
                     for (let i = 0 ; i < num ; i ++) {
                     //接口有多少数据    就向信息窗口数组添加多少次
                         windows.push({
                            position: [res.data.result.list[i].lng, res.data.result.list[i].lat],    //信息窗口地址的定位    循环添加接口数据
                            //信息窗口的信息内容           循环添加接口数据
                            content: 
                            `<div class="prompt">
                            <div>123</div>
                            <div>123</div>
                            <div>123</div>
                            <div>123</div>
                            <div>123</div>
                            <div>123</div>
                            </div>`,
                            visible: false
                        });

					 //接口有多少数据    就向地图上的圆点坐标数组添加多少次
                    markers.push({
                        position: [res.data.result.list[i].lng, res.data.result.list[i].lat],   //地图上的圆点坐标的定位    循环添加接口数据
                        //给marker添加循环点击事件
                        events: {
                        click() {           //点击当前 的圆点后触发的事件         把id带上去  获取当前点击的圆点的接口数据
                          
                            self.$axios({
                                method:'post',
                                url:self.api+'admin/screen_gps/details',
                                data:{
                                    token:a,
                                    id:res.data.result.list[i].id,
                                }
                            }).then(res=>{
                                // console.log(res)
                                if(res.data.status == 1){
                                //把接口返回的数据赋值给一个空数组
                                    self.info = res.data.result.info
                                    console.log(self.info)
                                    //点击的地图上的圆点  给对应的信息窗体里的文本内容改变赋值
                                    self.windows[i].content=`<div class="prompt">
                            
                            <div class="q1"><span class="q2">智屏编号:</span> ${self.info.sn}</div>
                            <div class="q1"><span class="q2">车主昵称:</span> ${self.info.nickname}</div>
                            <div class="q1"><span class="q2">上级昵称:</span> ${self.info.agentname}</div>
                            <div class="q1"><span class="q2">车牌号码:</span> ${self.info.car_number}</div>
                            <div class="q1"><span class="q2">车辆速度:</span> ${self.info.speed}</div>
                            <div class="q1"><span class="q2">屏幕类型:</span> ${self.info.goodsname}</div>
                            </div>`
                                    console.log(self.windows[i].content)
                                }
                            })
							
							//给信息窗体里的判断默认传false   默认不显示
                            self.windows.forEach(window => {
                            window.visible = false;
                            });
							
							//当前点击的圆点对应的信息窗体  为true  显示
                            self.window = self.windows[i];
                            self.$nextTick(() => {
                            self.window.visible = true;
                            });
                        }
                        }
                    });
                    }
					//然后上面设置的markers就等于这里面的markers
					//上面设置的windows 就等于这里面的windows 
                    this.markers = markers;
                    this.windows = windows;
                }
            })