高德使用小结

API地址：JSAPI结合Vue使用-JSAPI与前端框架结合-教程-地图 JS API v2.0 | 高德地图API

npm安装命令：npm i @amap/amap-jsapi-loader --save

使用步骤：

1、项目npm安装高德插件

npm i @amap/amap-jsapi-loader --save

2、在使用高德插件页面引入高德

import AMapLoader from '@amap/amap-jsapi-loader';

3、代码实现

<!--地图-->
 <div id="container" class="container"></div>

export default {
  data(){
    return{
      map: null
    }
  },
  mounted(){
    this.initMap();
  },
  methods:{
    initMap(){
      AMapLoader.load({
        key:"12345678900987654567", // key码
        version:"2.0", 
        plugins:[''],  
      }).then( (AMP) =>{
        this.map = new AMap.Map('container', { // 容器id ： container
          viewMode:"3D",    //是否为3D地图模式
          zoom:5,           //初始化地图级别
          center:[117.151202,36.664857], //初始化地图中心点位置
          dragEnable: true, // 是否允许鼠标拖拽
          scrollWheel: true, // 鼠标滚轮放大缩小
          doubleClickZoom: true, // 双击放大缩小
          keyboardEnable: false, // 键盘控制发达缩小移动旋转
          touchZoom: false, // 手势控制
        })
      }).catch( e => {
        console.log(e);
      })
    }
  }
}

  .container{
    width: 1280px;
    height: 600px;
    margin-top: 60px;
  }

应用错误点记载：

1、div中使用id标记区域，在methods使用标记id

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

this.map = new AMap.Map("container",{  //设置地图容器id

2、加载地图时，在 .then位置 AMP要用括号括起来，否则报错

}).then((AMap)=>{

3、定义地图容器时，注意Map首字母M大写，idea编辑器默认弹出方法map，导致报错

this.map = new AMap.Map("container",{  //设置地图容器id