vue2 引用高德地图

https://lbs.amap.com  进去后按照提示注册登陆

 1.点击左侧应用管理-我的应用

 2. 点击右上角创建新应用    给新创建的应用添加key    提交后就有key和密钥两个重要的东西（项目需要）

3.在项目的根目录里cmd  npm方式输入命令行：

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

4.在main.js 全局引入

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


Vue.config.productionTip = false;


// 初始化vue-amap
AMapLoader.load({
  'key': '自己申请的key',
  'version': '2.0',
  'plugins': ['AMap.Scale', 'AMap.GeoJSON']
}).then((AMap) => {
  // Vue.use(AMap)
  Vue.prototype.$AMap = AMap
})

5.创建页面

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

<script>
export default {
  data() {
    return {
      map: null,
    };
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.createMap();
    }, 1000);
  },
  methods: {
    createMap() {
      const that = this;
      const map = new that.$AMap.Map("container", {
        zoom: 13,
        zooms: [8, 20],
        viewMode: "2D",
        center: [113.22, 22.93],
        mapStyle: "amap://styles/darkblue",
        features: ["road", "point"],
      });
      this.map = map;
    },
  },
  computed: {},
  components: {},
};
</script>
 
<style lang = "less" scoped>
#container {
  width: 1000px;
  height: 800px;
}
</style>
  

6.在.eslintrc.js中设置

module.exports = {
  globals:{
    AMap:true
  }
}

这样就可以显示地图  。

如果显示空白背景 ，并且没有报错  ，检查是否使用了mock.js （可能会导致冲突），去除mockjs相关依赖即可。