高端百度地图开发1:自定义水滴头像(自定义标注覆盖物、Overlay覆盖类)

自定义水滴头像&自定义标注覆盖物

  • 一、引入百度地图JSAPI库
  • 二、构建map容器
    • 1. CSS样式表
    • 2.HTML容器
  • 三、核心代码
    • 1.百度地图API功能
    • 2.定义构造函数并继承Overlay
    • 3.初始化自定义覆盖物
    • 4.绘制覆盖物
    • 5.添加覆盖物

自定义标注覆盖物(Custom Overlay)是百度地图中的一种功能,它允许开发者在地图上绘制自定义的标记物,以更符合自己的业务需求和设计风格。通过自定义标注覆盖物,你可以在地图上添加各种类型的标记,如图标、文字、线条等,以丰富地图展示的内容。相比于普通的地图标注,自定义标注覆盖物具有更高的灵活性和可定制性。

使用百度地图的API,你可以定义自己的标注样式,包括标注的图标、形状、颜色、大小等。你还可以通过设置事件监听器,为标注添加交互功能,例如点击、拖拽等。

自定义标注覆盖物可以用于展示地理位置、标记兴趣点、显示业务数据等场景,让地图内容更加丰富生动。无论是在网页还是移动应用中,通过使用自定义标注覆盖物,你可以打造独特的地图展示效果,提升用户体验。
高端百度地图开发1:自定义水滴头像(自定义标注覆盖物、Overlay覆盖类)_第1张图片

一、引入百度地图JSAPI库

    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=3H***"></script>

二、构建map容器

1. CSS样式表

      body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #LockMap {
            width: 100%;
            height: 100%;
        }

2.HTML容器

<div id="LockMap">div>

三、核心代码

1.百度地图API功能

// 百度地图API功能
    var map = new BMap.Map("LockMap");
    var points = new BMap.Point(116.407845, 39.914101);
    map.centerAndZoom(points, 13);
    map.enableScrollWheelZoom();

2.定义构造函数并继承Overlay

首先您需要定义自定义覆盖物的构造函数,通过构造函数参数可以传递一些自由的变量。设置自定义覆盖物对象的prototype属性为Overlay的实例,以便继承覆盖物基类。
如下示例,我们定义一个名为LockAvatarLay的构造函数,它包含中心点和边长两个参数,用来在地图上创建一个方形覆盖物。

    function LockAvatarLay(point, headerImg, {width = 50, height = 65}) {
        this._point = point;
        this._headerImg = headerImg;
        this._width = width;
        this._height = height;
    }

3.初始化自定义覆盖物

实现initialize方法,当调用map.addOverlay方法时,API会调用此方法。
当调用map.addOverlay方法添加自定义覆盖物时,API会调用该对象的initialize方法用来初始化覆盖物,在初始化过程中需要创建覆盖物所需要的DOM元素,并添加到地图相应的容器中。

 LockAvatarLay.prototype = new BMap.Overlay();

    LockAvatarLay.prototype.initialize = function (map) {
        this._map = map;
        var divBox = document.createElement("div");
        var divImg = document.createElement("div");
        /*头像背景框*/
        divBox.style.position = "absolute";
        divBox.style.width = this._width + "px";
        divBox.style.height = this._height + "px";
        divBox.style.backgroundImage = "url(./images/header_bg.png)";
        divBox.style.backgroundSize = "100% 100%";
        /*头像CSS*/
        divImg.style.position = "absolute";
        divImg.style.backgroundImage = `url(${this._headerImg})`;
        divImg.style.left = "4%";
        divImg.style.top = "0%";
        divImg.style.width = "80%";
        divImg.style.height = "60%";
        divImg.style.borderRadius = "50%";
        divImg.style.backgroundSize = "cover";
        divImg.style.border = "3px solid #08d5c0";//边框
        divBox.appendChild(divImg);

        // 将div添加到覆盖物容器中
        map.getPanes().markerPane.appendChild(divBox);

        // 保存div实例
        this._div = divBox;
        // 需要将div元素作为方法的返回值,当调用该覆盖物的show
        // hide方法,或者对覆盖物进行移除时,API都将操作此元素。
        return divBox;
    }

4.绘制覆盖物

  LockAvatarLay.prototype.draw = function () {
        var position = this._map.pointToOverlayPixel(this._point);
        this._div.style.left = position.x - this._width / 2 + "px";
        this._div.style.top = position.y - this._height * 7 / 10 + "px";
    }

5.添加覆盖物

   var headerImg1 = new LockAvatarLay(new BMap.Point(116.407845, 39.914101), 'images/header_bg1.png', {});
    map.addOverlay(headerImg1);

@漏刻有时

你可能感兴趣的:(javascript,地图开发,javascript,百度地图)