百度地图自定义工具栏

function gongju() {
    // 自定义控件
    function ZoomControl() {
        this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
        this.defaultOffset = new BMap.Size(15, 1);
    }
    var size = new BMap.Size(350, 1);
    map.addControl(new BMap.CityListControl({
        anchor : BMAP_ANCHOR_TOP_RIGHT,
        offset : size,
    }));
    // 继承BMap.Control
    ZoomControl.prototype = new BMap.Control;
    // 控件初始化
    ZoomControl.prototype.initialize = function(map) {
        var div = document.createElement('div');
        var big = document.createElement('img');
        var small = document.createElement('img');
        var celiang = document.createElement('img');
        var lk = document.createElement('img');
        var bz = document.createElement('img');
       // big.appendChild(document.createTextNode('    '));
        div.appendChild(big);
        div.appendChild(small);
        div.appendChild(celiang);
        div.appendChild(lk);
        div.appendChild(bz);
        div.style.borderRight = 'solid 1px #c4c7cc';
        div.style.borderTop = 'solid 1px #c4c7cc';
        div.style.borderBottom = 'solid 1px #c4c7cc';
        div.style.height = '24px';
        div.style.background = '#fff';
        div.style.fontSize = '13px';
        div.style.color = '#000';
        div.style.textAlign = 'center';
        div.style.lineHeight = '24px';

        // big.style.borderRight = 'dashed 1px #c4c7cc';
        big.style.display = 'inline-block';
        big.style.cursor = "pointer";
        big.style.width = '60px';
        big.style.height = '24px';
        big.src = 'images/map/放大.png';
        big.style.borderRight = '1px solid #c4c7cc';
        big.style.marginRight = '9px';

        small.style.cursor = "pointer";
        small.style.borderRight = '1px solid #c4c7cc';
        small.style.display = 'inline-block';
        small.style.width = '60px';
        small.style.height = '24px';
        small.src = 'images/map/缩小.png';
        small.style.marginRight = '5px';

        celiang.style.cursor = "pointer";
        celiang.style.display = 'inline-block';
        celiang.style.borderRight = '1px solid #c4c7cc';
        celiang.style.width = '60px';
        celiang.style.height = '24px';
        celiang.src = 'images/map/测量.png';
        celiang.style.marginRight = '5px';

        lk.style.cursor = "pointer";
        lk.style.display = 'inline-block';
        lk.style.borderRight = 'solid 1px #c4c7cc';
        lk.style.width = '60px';
        lk.style.height = '24px';
        lk.src = 'images/map/定位.png';
        lk.style.marginRight = '5px';

        bz.style.cursor == 'pointer';
        bz.style.display = 'inline-block';
        bz.style.width = '60px';
        bz.style.height = '24px';
        bz.style.marginRight = '5px';
        bz.src = 'images/map/标记.png';

        // 注册点击事件
        big.onclick = function() {
            map.zoomTo(map.getZoom() + 2);
        };
        small.onclick = function() {
            map.zoomTo(map.getZoom() - 2);
        }

        celiang.onclick = function() {
            var myDis = new BMapLib.DistanceTool(map);
          
                myDis.open(); // 开启鼠标测距
        
        }
        lk.onclick = function() {
            // 添加带有定位的导航控件
            var navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor : BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type : BMAP_NAVIGATION_CONTROL_LARGE,
                // 启用显示定位
                enableGeolocation : true
            });
            map.addControl(navigationControl);
            // 添加定位控件
            var geolocationControl = new BMap.GeolocationControl();
            geolocationControl.addEventListener("locationSuccess", function(e) {
                // 定位成功事件
                var address = '';
                address += e.addressComponent.province;
                address += e.addressComponent.city;
                address += e.addressComponent.district;
                address += e.addressComponent.street;
                address += e.addressComponent.streetNumber;
                alert("当前定位地址为:" + address);
            });
            geolocationControl.addEventListener("locationError", function(e) {
                // 定位失败事件
                alert(e.message);
            });
            map.addControl(geolocationControl);
        }
        
        bz.onclick = function() {
            function showInfo(e) {
                //alert(e.point.lng + ", " + e.point.lat);
                var point = new BMap.Point(e.point.lng, e.point.lat);
                map.centerAndZoom(point, 15);
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                var label = new BMap.Label("我的标记",{offset:new BMap.Size(20,-10)});
                marker.setLabel(label);
                var removeMarker = function(e, ee, marker) {
                    map.removeOverlay(marker);
                }
                var markerMenu = new BMap.ContextMenu();
                markerMenu.addItem(new BMap.MenuItem('删除', removeMarker
                        .bind(marker)));
                marker.addContextMenu(markerMenu);
            }
            map.addEventListener("click", showInfo);
        }
        
        
        // 添加控件到地图
        map.getContainer().appendChild(div);
        return div;
    };

    // 添加自定义控件到地图
    var myZoomControl = new ZoomControl();
    map.addControl(myZoomControl);
}

猜你喜欢

转载自blog.csdn.net/qq_42037231/article/details/82784595
今日推荐