vuecli4 引入高德地图

1在高德地图API里面获取自己的key

2我们在高德地图API文档里面找到自己想要的地图效果

   2.1把高德地图的JS文件引入vue中的index.html文件里面，直接放在body里面

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

　　

 2.2我们在页面里面创建一个id名为container的div,宽高最好是定值为了保证出现效果

<div id="container" style=" 1000px; height: 500px"></div>

2.3 我们在methods里面写一个函数，函数里面包实例的配置代码

initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        rotateEnable: false,
        pitchEnable: false,
        zoom: 17,
        pitch: 65,
        rotation: 45,
        viewMode: "3D", //开启3D视图,默认为关闭
        expandZoomRange: false,
        center: [104.011432, 30.714047],
        zoom: 20,
      });

      this.marker = new AMap.Marker({
        position: this.map.getCenter(),
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        offset: new AMap.Pixel(-13, -30),
        // 设置是否可拖拽
        draggable: true,
        cursor: "move",
      });

      this.marker.setMap(this.map);

      // 设置点标记的动画效果，此处为弹跳效果
      this.marker.setAnimation("AMAP_ANIMATION_BOUNCE");
    },

2.4 实例里面命名的变量我们统一放在data里面

data() {
    return {
      map: null,
      marker: null,
    };
  },

2.5 然后我们在mounted调用函数

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