自定义百度地图样式
项目需求要把地图做成符合页面整体UI的样式,效果图如下:
话不多说贴代码
// 自定义主题
map.setMapStyle({
styleJson: [
{
featureType: "water",
elementType: "all",
stylers: {
color: "#102d68",
},
},
{
featureType: "land",
elementType: "all",
stylers: {
color: "#091934",
},
},
{
featureType: "boundary",
elementType: "geometry",
stylers: {
color: "#064f85",
},
},
{
featureType: "railway",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "highway",
elementType: "geometry",
stylers: {
color: "#004981",
},
},
{
featureType: "highway",
elementType: "geometry.fill",
stylers: {
color: "#005b96",
lightness: 1,
},
},
{
featureType: "highway",
elementType: "labels",
stylers: {
visibility: "on",
},
},
{
featureType: "arterial",
elementType: "geometry",
stylers: {
color: "#004981",
lightness: -39,
},
},
{
featureType: "arterial",
elementType: "geometry.fill",
stylers: {
color: "#00508b",
},
},
{
featureType: "poi",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "green",
elementType: "all",
stylers: {
color: "#102f6d",
visibility: "off",
},
},
{
featureType: "subway",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "manmade",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "local",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "arterial",
elementType: "labels",
stylers: {
visibility: "off",
},
},
{
featureType: "boundary",
elementType: "geometry.fill",
stylers: {
color: "#029fd4",
},
},
{
featureType: "building",
elementType: "all",
stylers: {
color: "#1a5787",
},
},
{
featureType: "label",
elementType: "all",
stylers: {
color: "#0e9cd2",
"font-weight": "bold",
visibility: "on",
},
},
{
featureType: "administrative", // 村名
elementType: "labels",
stylers: {
visibility: "on",
},
},
{
featureType: "administrative",
elementType: "labels.text.stroke",
stylers: {
color: "#0e9cd200",
weight: 0,
},
},
{
featureType: "road", // 路名
elementType: "labels",
stylers: {
visibility: "off",
},
},
],
});
完结,嘻嘻~~
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)