高德地图JS-API初始化地图配置 | vue实现

首先在高德地图开放平台创建一个Web端的key；

创建一个vue项目，然后执行下面命令

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

新建一个组件MapContainer.vue

<template>
  <div id="container" @click="clickMap"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {
      map: null,
      AMap: null,
    };
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    AMapLoader.load({
      key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        this.AMap = AMap;
        this.map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 15, //初始化地图级别
          center: [113.300423, 22.877056], //初始化地图中心点位置
        });
      })
      .catch((e) => {
        console.log(e);
      });
    
  },
  methods: {
    clickMap(e,v){
      console.log(e,v)
    }
  },
};
</script>

<style  scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>

在App.vue引入并注册

<template>
  <div id="app">
    <MapContainer/>
  </div>
</template>

<script>
import MapContainer from '@/components/MapContainer';

export default {
  name: 'App',
  components: {
    MapContainer
  }
}
</script>

<style>
</style>