百度地图自定义工具栏

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);
}

 

要在ECharts百度地图上添加工具栏,你可以使用ECharts提供的API和百度地图API结合起来实现。 以下是一个简单的示例,显示了如何在ECharts百度地图上添加工具栏: ```javascript // 初始化百度地图 var bmap = new BMap.Map("container"); bmap.centerAndZoom(new BMap.Point(116.404, 39.915), 11); bmap.enableScrollWheelZoom(true); // 初始化ECharts实例 var echartsContainer = document.getElementById('container'); var echartsInstance = echarts.init(echartsContainer); // 定义ECharts选项 var option = { // 将ECharts的地图类型设置为百度地图 bmap: { center: [116.404, 39.915], zoom: 11, roam: true }, // 定义ECharts工具栏 toolbox: { feature: { saveAsImage: {}, dataView: {}, restore: {}, myTool1: { show: true, title: '自定义工具1', icon: 'path://M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512z m251.15 369.38L503.88 317.5c-5.51-5.5-14.45-5.5-19.96 0L512 330.38V176c0-7.73-6.27-14-14-14s-14 6.27-14 14v161.34l-68.44-68.44c-5.5-5.5-14.44-5.5-19.95 0l-22.63 22.63c-5.5 5.5-5.5 14.44 0 19.95l91.55 91.55c2.75 2.75 6.36 4.12 9.98 4.12s7.23-1.37 9.98-4.12l91.56-91.55c5.5-5.5 5.5-14.44 0-19.95z', onclick: function () { alert('自定义工具1被点击'); } }, myTool2: { show: true, title: '自定义工具2', icon: 'path://M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512z m251.15 369.38L503.88 317.5c-5.51-5.5-14.45-5.5-19.96 0L512 330.38V176c0-7.73-6.27-14-14-14s-14 6.27-14 14v161.34l-68.44-68.44c-5.5-5.5-14.44-5.5-19.95 0l-22.63 22.63c-5.5 5.5-5.5 14.44 0 19.95l91.55 91.55c2.75 2.75 6.36 4.12 9.98 4.12s7.23-1.37 9.98-4.12l91.56-91.55c5.5-5.5 5.5-14.44 0-19.95z', onclick: function () { alert('自定义工具2被点击'); } } } }, // 定义ECharts系列数据 series: [{ type: 'scatter', coordinateSystem: 'bmap', data: [ [116.404, 39.915], [117.404, 39.915], [116.404, 40.915], [117.404, 40.915] ], symbolSize: 20 }] }; // 将选项设置到ECharts实例中 echartsInstance.setOption(option); ``` 请注意,此示例中的选项中有一个`toolbox`对象,其中包含了两个自定义工具。你可以根据需要添加或删除工具。 在上面的示例中,我们使用了一个自定义图标作为工具的图标。如果你没有自己的图标,可以使用ECharts提供的默认图标。例如,使用`saveAsImage`工具的默认图标,只需将`myTool1`工具的`icon`属性设置为`'image://http://echarts.baidu.com/images/favicon.png'`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值