百度地图更换定位点图标并展示label

目录

一、定义Icon类

二、创建marker时使用自定义图标

三、创建label并添加到marker上

四、更改laebl样式

五、最终实现效果（可直接跳过上述步骤先看下效果图哦~）

---

需求：叠加marker数据时，坐标点样式展示对应商家的logo图标，并使用label展示商家的名称

在百度地图上添加点图层数据的初始效果：

一、定义Icon类

在这里，我将icon抽离出去单独封装了一下，各位凭借自己的喜好使用即可，icon是我图片的路径，我在创建marker的方法里边会进行调用传参

//使用自定义的图标样式
let myIcon = (icon)  =>{
  let mapicon = new BMapGL.Icon(icon,new BMapGL.Size(23,25),{
    anchor: new BMapGL.Size(10, 25),
    imageOffset: new BMapGL.Size(0, 0)   // 设置图片偏移
  })
  return mapicon
}

二、创建marker时使用自定义图标

我的数据格式如下，图片存放在state_icon属性中，关于坐标点的详细信息，我会在vue文件中调用方法的时候传递过来

这里由于我数据的格式，我使用了下边的形式进行了方法的封装，大家根据自己数据的格式对应调整即可

// 地图叠加marker数据
let addmarker = (map,i,c) =>{
    for(let a = 0;a < i.length;a++){
      let point = new BMapGL.Point(i[a].y,i[a].x)
      //将点位点图标更换成logo
      let iconpic = './images/logo/' + i[a].point_style.state_icon;
      let marker = new BMapGL.Marker(point,{icon:myIcon(iconpic)})
      //添加属性信息
      marker.customData = i[a];
      marker.addEventListener("click",function(){
        infoWindow(map,marker,point)
      })
      c.value.push(marker)
      map.addOverlay(marker)
    }
  }

至此，上边步骤已经将坐标点更换为了商家对应的logo图标

三、创建label并添加到marker上

// 创建label
let mylabel = (point,content) =>{
  let label = new BMapGL.Label(content,{
    position:point,
    offset:new BMapGL.Size(0, 0)
  })
  return label
}

在marker上使用label，需要使用到setLabel()方法

将定位坐标点和展示的内容传过去

在根据实际展示效果，调整一下label的偏移量即可

四、更改laebl样式

我们发现实际运用的label样式很丑，所以需要更改下label的样式

使用lable的setStyle方法进行样式调整（根据我自己的审美调整的，具体样式自行设置）

// 创建label
let mylabel = (point,content) =>{
  let label = new BMapGL.Label(content,{
    position:point,
    offset:new BMapGL.Size(20, -28)
  })
  label.setStyle({
    color: '#19197090',
    backgroundColor:'rgba(255,255,255,.8)',
    fontSize: '16px',
    border: '1px solid #20B2AA',
    borderRadius:'12px',
    padding:'4px 8px',
    boxShadow:'0px 0px 1px #20B2AA'
  })
  return label
}

五、最终实现效果（可直接跳过上述步骤先看下效果图哦~）