vue-cli+高德地图

目录

first：

second:

third：

---

first：

前往高德地图开放平台注册key           https://lbs.amap.com/ 

需要注意的是，我这边用的是 如果是自己的项目使用，注册个人认证的就行  公司用的需要去购买企业认证，不然每天api访问次数有限制。

---

second:

安装高德地图依赖：npm i @amap/amap-jsapi-loader --save

引入

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

---

third：

上代码：

<template>
  <div id="app">
    <!-- 地图容器 -->
    <div id="container"></div>
  </div>
</template>

创建一个map接收， 填入平台注册的key：

<script>
// 引入loader
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map: null, // 用于接收
    };
  },
  created() {
    this.getmap();
  },
  methods: {
    getmap() {
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          // 在data中声明的map
          this.map = new AMap.Map("container");
        })
        .catch();
    },
  },
};
</script>

<style scoped>
#container {
  width: 1000px;
  height: 600px;
  margin: 100px auto;
}
</style>>

另外，

可直接在new aMap.map这直接定义地图的一些属性： 语言，创建点坐标，视图，级别等

methods: {
    getmap() {
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          // 在data中声明的map
          this.map = new AMap.Map("container",{
            lang: "zh_en",  // en，zh_en, zh_cn 可选
            center: [116.40, 39.90],     // 【 东经，北纬 】
            viewMode:'3D', // 使用3D视图 不写默认2D视图
            zoom: 13, // 级别
          });
        })
        .catch();
    },
  },

---

最终效果：

---

更多功能详细见官方文档： https://lbs.amap.com/api/javascript-api/guide/abc/load~