VUE中使用高德地图原生API

1.第一步安装

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

2.在需要地图的组件中引入

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

3.在生命周期中调用

<template>
  <div class="hello">
    <div id='container'></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'HelloWorld',
  data() {
     return {
       map: ''
     }
  },
  created() {
    AMapLoader.load({
    "key": "你的key",       // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "1.4.15",    // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],          // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 缺省 1.1
        "plugins":[],       // 需要加载的 AMapUI ui插件
    },
    }).then((AMap)=>{
        this.map = new AMap.Map('container');
    }).catch(e => {
        console.log(e);
    })
  }
}
</script>

<style scoped>
#container{
  width: 100vh;
  height: 100vh;
}
</style>