vue3里面高德地图如何使用自定义地图

范天缘

已于 2022-05-20 15:34:41 修改

阅读量2.3k

点赞数 1

分类专栏：高德地图 vue3

于 2022-05-20 15:33:53 首次发布

本文链接：https://blog.csdn.net/weixin_42821697/article/details/124884285

版权

Vue3 高德地图自定义样式地图API 前端开发

关键词由CSDN通过智能技术生成

vue3 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

高德地图

7 篇文章 2 订阅

订阅专栏

1.第一步登录高德开发平台找到你的控制台 ->应用->安全密匙 (没有就自己创建一个)
在这里插入图片描述
2.访问这个高德自定义地图地址创建一个你自己想要的模板
高德自定义地图地址

3.点击进入到你的模板,看到url了吗? styleid后面的一串字符就是你自定义地图模板的样式id

4.在你的vue3工程文件夹 ->public/index.html加入你的密匙
注明：这一步很重要

<script>
    window._AMapSecurityConfig = { 
      securityJsCode:'5919372a7fd52ab00015a385e591a75d' 
    }
</script>

在这里插入图片描述

5.在你注册地图的vue文件那里加入自定义地图的代码


         //高德地图引入
        const gaode = () =>{
            // 创建地图实例
            let map = new AMap.Map("map", {
                center: [114.298572, 30.584355],
                zoom: 12,
            });
            
            map.setCity("武汉市"); //初始化显示的区域



            //看这里
            var styleName = 'amap://styles/bb0dd307b72fdad14122906523045c4d';//底部颜色
            map.setMapStyle(styleName);
           //结束
        }