1.引入方式

1.1 直接引入

<script type="text/javascript"      src="https://webapi.amap.com/mapsv=1.4.15&key=通过高德开放平台申请到的key值&plugin=AMap.PolyEditor,AMap.Autocomplete,AMap.PlaceSearch,AMap.MouseTool">
</script>

1.2 npm相对依赖，全局加载

npm install --save @amap/amap-vue

2.创建地图

 <div id="container" />
 
    this.map = new AMap.Map('container') //绑定到div上
    this.map.setZoom(15) //调整缩放比例
    this.map.setCenter([120, 119]) //设置地图中心点

3.添加标记点

 var marker = new AMap.Marker({
        position: [110,120],  //标记点位置
        title: 'B包点',//鼠标悬浮在标记点上时候显示
        map: this.map //绑定到对应map上
      })

4.添加信息框(点击标记点时候显示弹框)

var infowindow = new AMap.InfoWindow({
        content: '<h2>还有30秒炸弹爆炸！</h2>',//信息框内容(可用HTML)
        offset: new AMap.Pixel(0, -30),//弹框相对与标记点向右下的位置，此处即为向上30
        size: new AMap.Size(220, 100)//设置弹框的宽高
      })
      AMap.event.addListener(marker, 'click', () => {
        infowindow.open(this.map, marker.getPosition())
      })
    },

参考：www.cnblogs.com/gluncle/p/1…

jimnox.gitee.io/amap-vue/in…