vue引入高德地图多种方法实现

vue引入高德地图多种方法实现
第一种按 NPM 方式全局使用 Loader
                安装依赖
                在main.js中进行全局注册
                在页面中使用
第二种按 NPM 方式局部使用 Loader
                安装依赖
                在需要使用地图的页面进行初始化
第三种直接加载 JSAPI 脚本
                vue项目目录的public/index.html文件下添加以下代码
                在需要使用的页面直接使用
                如果此时报运行报错
                .eslintrc.js里面加上下面这段代码即可
第一种按 NPM 方式全局使用 Loader
安装依赖

npm install @amap/amap-jsapi-loader

在main.js中进行全局注册

import AMapLoader from '@amap/amap-jsapi-loader';
// 如果需要密钥
window._AMapSecurityConfig = {
    securityJsCode: '没有则不用' // 开发环境使用
}
AMapLoader.load({
    key: "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    AMapUI: {
        // 是否加载 AMapUI，缺省不加载
        version: '1.1', // AMapUI 缺省 1.1
        plugins: [] // 需要加载的 AMapUI ui插件
    },
    Loca: {
        // 是否加载 Loca， 缺省不加载
        version: '2.0.0' // Loca 版本，缺省 1.3.2
    }
}).then((AMap) => {
    // 挂载AMap
    Vue.prototype.$AMap = AMap;
});

在页面中使用

mounted() {
    setTimeout(()=>{
      // 需要确保AMap已经挂在到$AMap上
      this.initMap()
    },1000)
  },
  methods: {
    initMap() {
      this.map = new this.$AMap.Map('container', {
        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
        zoom: 11, //初始化地图层级
        center: [119.20058, 32.98972],//初始化地图中心点
      });
    }
  }

第二种按 NPM 方式局部使用 Loader

安装依赖

// 高德地图官方推荐依赖
npm install @amap/amap-jsapi-loader

参考 vue高德地图初体验地图初始化(一)_菜鸡的崛起的博客-CSDN博客

第三种直接加载 JSAPI 脚本

vue项目目录的public/index.html文件下添加以下代码

  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你自己的key"></script>
  <script>
    window._AMapSecurityConfig = {
      securityJsCode: '你自己的密钥，没有则不用' // 开发环境使用
    }
  </script>

在需要使用的页面直接使用

  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      this.map = new AMap.Map('container', {
        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
        zoom: 11, // 初始化地图层级
        center: [119.20058, 32.98972]// 初始化地图中心点
      })
    }
  }

如果此时报运行报错
‘AMap’ is not defined no-undef

.eslintrc.js里面加上下面这段代码即可

  globals: {
    AMap: true
  }

更多参数说明

原文链接：https://blog.csdn.net/l_____z______z/article/details/125996719