百度地图API自定义覆盖物渲染

debug真快乐

于 2021-07-26 11:11:48 发布

阅读量830

点赞数

文章标签：百度 vue js

本文链接：https://blog.youkuaiyun.com/qq_43734389/article/details/119104317

版权

本文记录了在vue项目中利用百度地图API进行自定义覆盖物渲染的过程，内容包括从官方DEMO获取灵感并解决层级和其它难题的经验分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记一下自定义覆盖物渲染代码，部分代码是抄官方demo的作业

/** 
* 环境 vue2.x + webpack
*/
// 先整个js类，继承百度MAP的Overlay
export default class CustomizedOverlay extends BMap.Overlay{
    constructor(point, self, data) {
      super();
      this._point = point;
      this._self = self;
      this._data = data;
    }
    initialize(map) {
      // 这里自定义覆盖物，想画个啥就画个啥，整个canvas也不是不可以
      const template = `<div class="name">${this._data.name}</div>`;
      let target = this._div = document.createElement("div");
      target.innerHTML = template;
      // demo里这里给的是map.getPanes().LabelPane.appendChild(target)，我这边没用到label这个覆盖物，想来还是放在map上最稳妥，就放map上了
      map.getPanes().mapPane.appendChild(target)
      return target;
    }

    draw() {
      let map = this._self.map;
      let pixel = map.pointToOverlayPixel(this._point);
      this._div.style.left = pixel.x - 11 + "px

最低0.47元/天解锁文章