Vue 中使用高德地图原生api解决自定义样式不生效问题

原创已于 2022-07-03 17:23:36 修改 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #高德地图api

于 2022-01-12 11:35:08 首次发布

笔记记录同时被 2 个专栏收录

287 篇文章

订阅专栏

Vue

34 篇文章

订阅专栏

本文介绍了解决高德地图自定义样式问题的方法。通过在Vue项目的public/index.html文件中正确配置安全密钥，使得自定义地图样式能够成功加载并显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题来源

最近在做北京供水系统的时候需要用到地图展示水厂，但是需要做自定义样式，但是官方样式可以，自己的自定义样式不管咋都不行

解决

官方给出解决方法，附上官方连接：https://lbs.amap.com/api/javascript-api/guide/abc/prepare
在这里插入图片描述

<script>
    window._AMapSecurityConfig = {
        securityJsCode:'你的安全秘钥',
    }
</script>

好多人说添加上面配置就可以，但是自己添加的不行，那得看添加到什么位置了，

得把这个配置添加到了 vue根目录的pulic/index.html 模版文件里
在这里插入图片描述
如果你在vue中配置高德地图跟我的不一样，可以看看我这篇文章： https://blog.csdn.net/u014641168/article/details/122448241
然后样式就生效了