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

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);
           //结束
        }

6.显示了你的自定义样式地图了