百度地图开发入门（2）：控件与个性化地图

原创于 2022-06-09 12:25:20 发布

· 854 阅读

2 ·

版权

文章标签：

#javascript #前端 #http

数据可视化专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用百度地图API添加缩放和标尺控件，以及如何设置地图的个性化风格。通过示例代码展示了如何初始化地图、添加缩放控件和标尺控件，并提醒注意百度文档的准确性。此外，还分享了如何在百度的个性化地图平台创建并应用自定义样式，包括设置样式ID或直接使用JSON配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控件

这个控件的概念类似echarts中的组件，例如地图里面控制放大缩小的图表、标尺等等工具。

1. 缩放控件

首先我们添加一个控制zoom的组件：

<body>

    <div id="map"></div>

    <script>

        // 地图对象初始化

        let map = new BMapGL.Map('map', {

            // 传入初始化参数（具体可以官方文档）

            minZoom: 8,

            maxZoom: 12

        });

        // 地图中心坐标 - 后续地图绘制都需要这种坐标

        let point = new BMapGL.Point(116.404, 39.915);

        // 可以展示地图了

        map.centerAndZoom(point, 10);

        // 允许鼠标滚轮滚动放大缩小

        map.enableScrollWheelZoom(true);

        map.setHeading(0);

        map.setTilt(70);

        // 设置缩放范围 - 但是这个API在实际map对象原型上没有，官方文档有，这也是一个坑

        map.setMinZoom(8);

        map.setMaxZoom(12)

        let zoomCtrl = new BMapGL.ZoomControl({

            // 初始位置

            anchor: BMAP_ANCHOR_BOTTOM_LEFT,

            // 进行位移

            offset: new BMapGL.Size(100, 0)

        });

        map.addControl(zoomCtrl);



    </script>

</body>

注意百度文档不一定百分百可信，出现问题还是要打印对象看

2. 标尺控件

这个控件用于描述地图上一段距离代表的实际长度，他会根据你的实际缩放比例调整文案：

 // 添加事件

        map.addEventListener('zoomstart', function(){

            console.log(map.getZoom());

        })



        let scaleCtrl = new BMapGL.ScaleControl({

            anchor: BMAP_ANCHOR_TOP_LEFT

        })

        map.addControl(scaleCtrl)

个性化地图

即可以自定义百度地图的部分样式，例如地图上面区域换一个颜色，路径换一个颜色等等。

这里我们可以前往百度的个性化地图中编辑，通过一些样式模板以及二次操作来生成最后的地图样式：

https://lbsyun.baidu.com/index.php?title=open/custom

最后配置好了之后可以发布样式，同时获取一个样式ID，在我们的代码中新增：

map.setMapStyleV2({

    styleId:'xxxxx'

})

就可以生效新的样式了！

另外也可以获取配置的JSON文件，然后复制到本地：

map.setMapStyleV2({

    styleJson:{...}

})