开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第28天，点击查看活动详情

写在前面

本篇文章中介绍高德地图如何使用自定义地图，以及使用过程中遇到的问题的解决方法。

自定义地图

1、创建应用

首先，需要注册高德开发者账号，注册网址，注册之后进入应用管理-我的应用，点击右上角创建新应用，填写应用名称和选择应用类型。

应用创建成功后为应用添加key，填写Key名称，选择web端（JS API），提交即可。

提交后生成Key和安全密钥，后续都要用。

2、创建自定义地图

进入自定义地图编辑页，要和上面生成的Key是同一个账号，自定义样式后需要发布，发布成功后点击分享，就可以看到需要用的样式ID

3、使用自定义地图

在vue项目终端输入命令：npm i @amap/amap-jsapi-loader --save，在需要展示地图的页面创建一个地图容器<div id="container"></div>，不要忘记设置容器的长和宽。

创建地图并使用刚刚创建的自定义地图样式：

<script>
import AMapLoader from '@amap/amap-jsapi-loader'; // 引入地图

export default {
  data() {
    return {
      map: null // 也可以不定义
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "创建的Key",
        version: "2.0",
        plugins: [''],
      }).then((AMap) => {
        this.map = new AMap.Map("container", {
          viewMode: "3D", // 是否使用3D
          zoom: 13,
          center: [113.428702, 32.379164], // 中心点
          mapStyle: '创建的样式id'
        });
      }).catch(e => {
        console.log(e);
      })
    },
  },
}
</script>

同时需要在public\index.html配置安全密钥，官方推荐的是JSAPI key搭配代理服务器并携带安全密钥转发，我用的是方案2，在public\index.html中添加如下代码：

  <script>
    window._AMapSecurityConfig = {
      securityJsCode: '创建的安全密钥',
    }
  </script>

遇到的问题

如果是照着上面的步骤一步步进行下来的，应该是没有问题的，如果还是有问题，就检查以下地方：

1、有没有填写key，没有填key的话地图都不显示

2、使用的key和自定义样式是否是同一个账号创建的，不是则不行

3、有没有在public\index.html中配置securityJsCode

4、自定义样式有没有发布

写在最后

以上就是高德地图使用自定义地图的过程和问题解决的全部代码和说明