微信小程序手把手自定义地图样式

2,859 阅读3分钟

背景

在我们开始之前,先让我们来看看一个问题:为什么地图要自定义样式呢?是因为原来的地图太丑了吗?其实不是的。自定义地图样式是为了让地图更符合我们的设计需求,让地图看起来更加美观和个性化。

前提

由于咱们是在微信小程序,所以理所当然只能使用腾讯地图,那就有人问了,明明都说是可以使用高德地图的?

可以用,但不完全可以用。实际上目前是微信小程序的map组件提供硬件,例如地图显示、定位、显示大头针、自定义样式等基本功能,高德地图、百度地图等其他的地图服务商的 SDK 提供大脑,其实这些 SDK 只是提供了一些网络请求接口,请求这些接口,能获得对应结构的网络数据,再驱动 map 组件来渲染,例如线路规划、获取周边的POI等。

那就开始吧!

步骤

一、创建自定义样式

  1. 登录腾讯地图开放平台,注册成为开发者,进入「我的应用」页面,点击「创建应用」按钮,输入应用名称和应用类型,点击确定创建一个新的应用。

image.png

  1. 添加 key 到新创建的应用

点击添加 key image.png

输入 key 的名称和微信小程序的 appId

image.png

  1. 「个性化地图」->「个性化样式」->「我的样式」,可以在当前页面查看地图模板或者创建自定义地图样式 在下图左侧对各种类型的背景进行调整,调整完成之后点击上方的保存按钮保存

image.png

  1. 前往「样式应用」页面,选择刚才的 key ,我们这里是之前新建的key的名称 test1 ,点击「设置绑定样式」按钮

image.png

添加样式,在这里可以添加我们需要的地图样式,样式模板和自定义样式 (不必发布) 都可以,点击确认,最后提交

这样我们的自定义样式就创建成功了,现在我们这个 key 下面就有了3个地图样式,分别是 style1(经典)style2(烟翠)style3(自定义样式)image.png

二、添加 subkeylayer-style

得到 subkey 和 layer-style 参数后,就可以在uniapp中使用自定义地图样式了。具体代码示例如下:

<map subkey="subkey" layer-style="styleId"></map>

其中,subkey 属性的值为我们在腾讯地图开放平台中获取的 subkey 参数,layer-style 属性的值为你在腾讯地图开放平台中创建的地图样式的样式ID或样式代码。

以下图为例,假如想要用自定义样式 style3 ,那么 subkey 就是下图的密钥(Key),layer-style 就是3

image.png

等到编译完成,自定义地图样式就会生效(这里是因为我把绿地和水系的背景色分别换成了红色和黄色)

image.png

最后感谢各位大佬的阅读,祝大家生活开心,工作顺利!

参考链接

微信小程序之:小程序接入高德地图SDK