【高德地图进阶】--- 自定义地图高德地图当发布自定义地图方法：点击右上角的发布按钮点击下图中按钮获取地图样式id

在开发的过程中, 有时候高德官方地图样式无法符合需求,这就需要我们自定义地图的样式了. 步骤:登录高德地图-->进入控制台-->自定义地图

在这里插入图片描述 **这里面

可以直接创建地图,也可以在模板基础上进行修改可以控制颜色,显隐 ,具体根据需求. 也可以添加纹理,但是需要开通会员.

在这里插入图片描述

发布地图

点击右上角的发布按钮在这里插入图片描述点击下图中按钮获取地图样式id

引入自定义地图

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>map</title>
    <style>
        body,
        html,
        #container {
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>
<script>
    window._AMapSecurityConfig = {
        securityJsCode: "xxxx",
    };
</script>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=cccc"></script>
<script language="javascript">
    const map = (window.map = new AMap.Map("container", {
        center: [118.035441, 36.323541],
        viewMode: "3D",
        zoom: 7,
        pitch: 50,
        // 指定地图样式id
        mapStyle: "amap://styles/7f17f200395d5xxxxxxxxx61f99",
    }));


</script>

</html>

在这里插入图片描述