自定义样式

刀刀

12/31/2024

0 字

0 分钟

地图默认样式是白色底，可以通过相应的 API 实现切换不同种类的样式。

根据个性化地图文档可看出，可以通过两种方式实现效果：

通过样式ID调用个性化地图样式
1. 进入地图开放平台控制台页面，在我的地图中，创建一个地图样式：
2. 点击创建的地图样式，进入样式编辑器，根据需求自由编辑地图样式：
3. 完成编辑后，在我的地图或者编辑器中发布该地图样式，获取发布后生成的样式ID
4. 在JavaScript API中应用地图样式
  将第三步中获取的样式ID作为setMapStyleV2方法的参数。(注意：发布的styleID需要与ak为同一个用户)
  js
```
map.setMapStyleV2({     
  styleId: '3d71dc5a4ce6222d3396801dee06622d'
});
```

通过样式 JSON 文件调用样式

在编辑界面复制 JSON 文件

在项目中粘贴，引入使用

import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import useMapStore from '@/store/index.js'
import styleJson from '@/assets/json/mapStyle.json'

// 获取pinia仓库内的地图实例
const { map } = storeToRefs(useMapStore())

onMounted(() => {
    map.value = new BMapGL.Map(container.value)
    // ...
    map.value.setMapStyleV2({ styleJson: styleJson }); // 地图自定义样式
})

通过以上两种方式都能实现地图样式自定义调整。

自定义样式 ​

自定义样式