js如何通过百度地图api使用自定义控件实现一键回到中心点功能

天清¶魂孤

已于 2023-03-07 21:06:45 修改

阅读量790

点赞数 18

文章标签： javascript 前端开发语言

于 2023-03-07 21:01:03 首次发布

本文链接：https://blog.csdn.net/qq_50047066/article/details/129391325

版权

百度地图js实现自定义控件（实现回到中心点功能）

代码
实现效果

代码

想在项目中开发一个自定义控件，实现点击后一键回到中心点的功能。代码如下：

  //定义一个控件类
    function ZoomControl() {
      this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;    //这里的常量是控件在地图中的位置，这里是右下角
      this.defaultOffset = new BMapGL.Size(20, 20);        //位置偏移量
    }
    //通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMapGL.Control();
    //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
    //在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
    ZoomControl.prototype.initialize = function (map) {
      //创建一个dom元素
      var div = document.createElement("div");
      //添加文字说明
      div.style.backgroundImage = `url('../src/assets/精准私域.png')`;
      div.style.backgroundSize = "100% 100%";
      // 设置样式
      div.style.height = "30px";
      div.style.width = "30px";
      div.style.color = "black";
      div.style.fontSize = "10px";
      div.style.cursor = "pointer";
      div.style.padding = "7px 10px";
      div.style.boxShadow = "0 2px 6px 0 rgba(27, 142, 236, 0.5)";
      div.style.borderRadius = "5px";
      
      // 绑定事件,地图回到中心点，point事先已经定义好
      div.onclick = function (e) {
        map.centerAndZoom(point, 15);
      };
      // 添加DOM元素到地图中
      map.getContainer().appendChild(div);
      // 将DOM元素返回
      return div;
    };