背景
在我们开始之前,先让我们来看看一个问题:为什么地图要自定义样式呢?是因为原来的地图太丑了吗?其实不是的。自定义地图样式是为了让地图更符合我们的设计需求,让地图看起来更加美观和个性化。
前提
由于咱们是在微信小程序,所以理所当然只能使用腾讯地图,那就有人问了,明明都说是可以使用高德地图的?
可以用,但不完全可以用。实际上目前是微信小程序的map组件提供硬件,例如地图显示、定位、显示大头针、自定义样式等基本功能,高德地图、百度地图等其他的地图服务商的 SDK 提供大脑,其实这些 SDK 只是提供了一些网络请求接口,请求这些接口,能获得对应结构的网络数据,再驱动 map 组件来渲染,例如线路规划、获取周边的POI等。
那就开始吧!
步骤
一、创建自定义样式
- 登录腾讯地图开放平台,注册成为开发者,进入「我的应用」页面,点击「创建应用」按钮,输入应用名称和应用类型,点击确定创建一个新的应用。
- 添加
key到新创建的应用
点击添加 key
输入 key 的名称和微信小程序的 appId
- 「个性化地图」->「个性化样式」->「我的样式」,可以在当前页面查看地图模板或者创建自定义地图样式 在下图左侧对各种类型的背景进行调整,调整完成之后点击上方的保存按钮保存
- 前往「样式应用」页面,选择刚才的
key,我们这里是之前新建的key的名称test1,点击「设置绑定样式」按钮
添加样式,在这里可以添加我们需要的地图样式,样式模板和自定义样式 (不必发布) 都可以,点击确认,最后提交
这样我们的自定义样式就创建成功了,现在我们这个 key 下面就有了3个地图样式,分别是 style1(经典)、style2(烟翠) 、 style3(自定义样式)。
二、添加 subkey 和 layer-style
得到 subkey 和 layer-style 参数后,就可以在uniapp中使用自定义地图样式了。具体代码示例如下:
<map subkey="subkey" layer-style="styleId"></map>
其中,subkey 属性的值为我们在腾讯地图开放平台中获取的 subkey 参数,layer-style 属性的值为你在腾讯地图开放平台中创建的地图样式的样式ID或样式代码。
以下图为例,假如想要用自定义样式 style3 ,那么 subkey 就是下图的密钥(Key),layer-style 就是3
等到编译完成,自定义地图样式就会生效(这里是因为我把绿地和水系的背景色分别换成了红色和黄色)
最后感谢各位大佬的阅读,祝大家生活开心,工作顺利!