高德地图点标记及信息窗体的使用

项目背景：要做一个数据大屏，需要用到地图以及点标记，UI大致是这样：

我是结合vue使用的，vue调用高德地图有一个组件是vue-amap，基于vue2.0和高德地图的
我是后端开发，vue是才上手，没有使用npm安装，整个实现上可能走了一些弯路，下面整理一下实现步骤
1.引入amap的js，将key修改为你的高德key

<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.15&key=XXXXXXXXXXXXXXX&plugin=AMap.ToolBar'></script>

2.初始化地图

// 初始化高德地图的 key 和插件
var MapsEvent = window.VueAMap.initAMapApiLoader({
   
    key: '{
   $mapkey}',
    plugin: [
        'AMap.Autocomplete',    //输入提示插件
        'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor','MarkerClusterer'],
    v: '1.4.4'	// 默认高德 sdk 版本为 1.4.4
});

3.页面引入

1.使用3D的话就设置viewMode为3D
2.设置center中心点，一般数据大屏都会默认固定一个中心点，所以不用费心去实时获取当前定位点，直接选个坐标点了写死在页面就行了，或者是把中间点的坐标做成后台动态配置
3.zoom缩放比例根据实际业务
4.el-amap-marker 是点标记
5.el-amap-info-window是信息窗体，不是说每个点标记都要有一个独立的信息窗体，是共用的同一个信息窗体，所以点击每个点标记的时候将信息窗体的内容变化就好了

<el-amap
         ref="map"
         :vid="'mapDiv2'"
         viewMode="3D"
         map-style="dark"
         :center="center"
         :zoom="zoom"
         :events="events"
         class="amap-demo"
         rotateEnable="true"
 >
     <el-amap-marker v-for="(marker,index) in markers" :position="marker.position" :title="marker.title" :icon="marker.icon" :key="index" :events="marker.events"></el-amap-marker>
     <el-amap-info-window
             :position="currentWindow.position"
             :content="currentWindow.content"
             :visible="currentWindow.visible"
             :events="currentWindow.events">
     </el-amap-info-window>
 </el-amap>

4.配置数据

var app = new Vue({
   
     el: '#app',
     data: {
   
     	center: [112.987526,28.220296],
         zoom: 22,
         position: [112.987526,28.220296],
         icon:'/assets/webimg/location_blue.png',
         currentWindow: {
   
             position: [