百度地图根据缩放级别显示覆盖物内容

Question

根据百度地图的缩放级别，如大于15的时候，显示蓝色小船图标下的船名，如下图所示：

如过缩放级别小于15，船名消失，只显示蓝色图标；

 <!--百度地图js代码-->
<script type="text/javascript">

    // 定义一个有返回值的ajax函数供调用
    function ajaxCustom(url, data, method, async) {
        var result = null;
        $.ajax({
            url : url,
            data : data,
            type : method,
            async : async,
            contentType : "application/x-www-form-urlencoded; charset=UTF-8",
            success : function(responseText) {
                result = responseText;
            },
            error : function(msg) {
                console.log(msg);
            },
            complete : function(XHR, TS) {
                XHR = null;
            }
        });
        return result;
    }

    $(function(){
        shipList('');
    });

    var map = new BMap.Map("map_wrapper");

    var point = new BMap.Point(118.3677390000, 31.3325560000);
    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
    }

    map.centerAndZoom(point,12);  // 编写自定义函数，创建标注
    map.addControl(new BMap.NavigationControl());
    map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
    map.enableKeyboard();//启动键盘操作地图
    // 定义自定义覆盖物的构造函数
    function SquareOverlay(center, length){
        this._center = center;
        this._length = length;
    }
    // 继承API的BMap.Overlay
    SquareOverlay.prototype = new BMap.Overlay();

    // 实现初始化方法
    SquareOverlay.prototype.initialize = function(map){
        // 保存map对象实例
        this._map = map;
        // 外层容器
        var shipMainWrapper = document.createElement("div");
        shipMainWrapper.style.height    = (this._length + 20) + "px";
        shipMainWrapper.style.width     = (this._length + 20) + "px";
        shipMainWrapper.style.textAlign = "center";
        shipMainWrapper.style.position  = "absolute";
        shipMainWrapper.id              = this._center.ship_id;
        //船舶图片容器
        var shipImgWrapper = document.createElement("div");
        var shipImg = document.createElement("img");
        shipImg.src = "../resource/web/images/home/kong.png";
        if (this._center.isEmpty == "1"){
            shipImg.src = "../resource/web/images/home/man.png";
        }
        shipImgWrapper.appendChild(shipImg);
        //船舶名
        var shipName = document.createElement("div");
        shipName.innerText = this._center.shipName;
        //组装
        shipMainWrapper.appendChild(shipImgWrapper);
        shipMainWrapper.appendChild(shipName);
        // 将div添加到覆盖物容器中
        map.getPanes().markerPane.appendChild(shipMainWrapper);
        // 保存div实例
        this._div = shipMainWrapper;
        // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
        // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
        return shipMainWrapper;
    }

    // 实现绘制方法
    SquareOverlay.prototype.draw = function(){
        // 根据地理坐标转换为像素坐标，并设置给容器
        var position = this._map.pointToOverlayPixel(this._center);
        this._div.style.left = position.x - this._length / 2 + "px";
        this._div.style.top = position.y - this._length / 2 + "px";
    }

    // 实现显示方法
    SquareOverlay.prototype.show = function(){
        if (this._div){
            this._div.style.display = "";
        }
    }
    // 实现隐藏方法
    SquareOverlay.prototype.hide = function(){
        if (this._div){
            this._div.style.display = "none";
        }
    }


</script>

Answer 1

添加zoomend 事件获取缩放值，然后显示隐藏就行了，船名的div加个特殊样式，好统一获取

 var shipName = document.createElement("div");
shipName.className='shipName';////////添加一个特殊样式
shipName.innerText = this._center.shipName;


    map.addEventListener('zoomend', function (e) {
        var div = document.querySelectorAll('div.shipName');
        var display = map.getZoom() > 15 ? 'block' : 'none';
        for (var i = 0; i < div.length; i++) div[i].style.display = display;
    })