高德地图使用/初始化引入/地图样式

1.注册/登录高德开放平台

首先/注册开发者账号，成为高德开放平台开发者
登陆之后，在进入「应用管理」 页面「创建新应用」
为应用添加 Key
添加成功后，可获取到key值和安全密钥jscode
（自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用；

安装高德第三方包

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

<template>
  <!-- 地图  -->
  <div id="amapcontainer"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  // 设置安全密钥
  securityJsCode: "",
};
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  created() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          console.log(AMap);
           this.AMap = AMap
                // 获取到作为地图容器的DOM元素，创建地图实例
                this.map = new AMap.Map("amapcontainer", { //设置地图容器id
                    resizeEnable: true,
                    viewMode: "2D", // 使用3D视图
                    zoomEnable: true, // 地图是否可缩放，默认值为true
                    dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
                    doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
                    zoom: 10.2, //初始化地图级别
                    center: [119.858881, 30.794178], // 初始化中心点坐标
                    //设置地图的显示样式
                    mapStyle: 'amap://styles/189339a13af61c9cb69dab5bed0ba152',
                    // mapStyle: "amap://styles/darkblue", // 设置颜色底层
                })
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style scoped>
#amapcontainer{
  overflow: hidden;
  width: 500px;
  height: 500px;
  margin: 0;
}
</style>

插件

地图样式