vue-cli加入高德地图最简单的方式

vue-cli加入高德地图最简单的方式

在这里就不多说怎么搭建vue-cli项目如果不会自行百度即可很多

1、打开高德地图开放平台

首先在使用高德地图前先注册一个账号这里就不多说了
地址：https://lbs.amap.com/按照所需要求注册

1. 创建应用获取key

vue-cli引用
第一步：在index.html中引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己刚才申请的key"></script>

第二步：在你要显示地图的组件中创建地图
（1）、创建容器

<div id="container"></div>

（2）、在methods中创建函数初始化地图

initMap: function() {
      this.map = new AMap.Map('container', {
        zoom: 18, //级别
        center: this.info.Longitudelatitude, //中心点坐标
        viewMode: '3D' ,//使用3D视图
      });
}

（3）、在mouted中调用

 mounted() {
        this.initMap();
  },

这时候你的地图就成功了