【高德地图进阶】--- 自定义地图

最新推荐文章于 2024-05-20 10:44:53 发布

鲸渔

最新推荐文章于 2024-05-20 10:44:53 发布

阅读量4.2k

点赞数

分类专栏：【地图开发】文章标签： css 前端 javascript html

本文链接：https://blog.csdn.net/qq_39078783/article/details/122155442

版权

【地图开发】专栏收录该内容

16 篇文章 11 订阅

订阅专栏

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

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

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

在这里插入图片描述

发布地图

点击右上角的发布按钮
在这里插入图片描述
点击下图中按钮

获取地图样式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>

在这里插入图片描述

鲸渔

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
4
评论
【高德地图进阶】--- 自定义地图

在开发的过程中, 有时候高德官方地图样式无法符合需求,这就需要我们自定义地图的样式了.步骤:登录高德地图–>进入控制台–>自定义地图可以直接创建地图,也可以在模板基础上进行修改可以控制颜色,显隐 ,具体根据需求. 也可以添加纹理,但是需要开通会员.发布地图点击右上角的发布按钮点击下图中按钮获取地图样式id引入自定义地图<!DOCTYPE html><html><head> <meta name="vie.
复制链接

扫一扫