百度地图:设置复杂的自定义覆盖物,addOverlay添加自定义覆盖物ComplexCustomOverlay

// 设置复杂的自定义覆盖物
setComplexCustomOverlay({
  coordinate,
  icon = 1,
  label,
  contentHTML, }) {
  var mp = this.map;
  let _BMAP = this.data.type == 3 ? BMapGL : BMap;
  // 自定义覆盖物----------------------------------------
  function ComplexCustomOverlay({
    point,
    icon,
    label,
  }) {
    this._point = point;
    this._label = label;
    this._icon = icon;
  }
  ComplexCustomOverlay.prototype = new _BMAP.Overlay();
  ComplexCustomOverlay.prototype.initialize = function (map) {
    this._map = map;
    var div = this._div = document.createElement("div");
    div.style.cssText = `
position:absolute;/* 注意:必须绝对定位,否者会错位 */
z-index:${_BMAP.Overlay.getZIndex(this._point.lat)};
transition: .382s;
cursor: pointer;
border-radius: 4px;
overflow: hidden;
    `
    div.innerHTML = ` 
<div  style="
display: flex;
align-items: center;
flex-wrap: nowrap;
box-sizing: border-box;
border-radius: 8px 8px 8px 8px;
padding: 3px 10px;
border: solid 4px;border-image: linear-gradient(135deg, #3C71E4 3%, #1BA1FB 96%) 1 1 stretch;
background: #0063FE;
box-shadow: inset 1px 0px 1px 0px #0858D6, inset -1px 0px 1px 0px #0858D6, 0px -1px 1px 0px #0858D6, 0px 1px 1px 0px #0858D6;
    " >
<div
  style="
  background:url(static/img/map/icons/${this._icon}.png) no-repeat no-repeat center / contain;
  width: 24px;
  height: 24px;
  " 
></div>
<div  style="
margin-left: 5px;
font-size: 15px;
font-family: 'Microsoft YaHei';
font-weight: 400;
color: #F0F1F7;
line-height: 20px;
white-space: nowrap;" >
    ${this._label}
</div>
</div>`
    div.onmouseover = function () { this.style.filter = `brightness(1.2)` }
    div.onmousedown = function () { this.style.filter = `brightness(.9)` }
    div.onmouseout = function () { this.style.filter = `brightness(1)` }

    mp.getPanes().labelPane.appendChild(div);
    return div;
  }
  ComplexCustomOverlay.prototype.draw = function () {
    var map = this._map;
    var pixel = map.pointToOverlayPixel(this._point);
    this._div.style.left = `${pixel.x}px`;
    this._div.style.top = `${pixel.y}px`;
  }
  // ----------------------------------------
  mp.addOverlay(new ComplexCustomOverlay({
    point: new _BMAP.Point(...coordinate),
    icon,
    label,
  }));
},

相关资料 

地图JS API示例 | 百度地图开放平台地图JS API示例中心,以示例的形式介绍百度地图JS API如何使用,为开发者提供丰富的应用参考。https://lbsyun.baidu.com/jsdemo.htm#gl-overlay

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值