这个控件的概念类似echarts中的组件，例如地图里面控制放大缩小的图表、标尺等等工具。
首先我们添加一个控制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);// 可以展示地图了AndZoom(point, 10);// 允许鼠标滚轮滚动放大缩小ableScrollWheelZoom(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>
注意百度文档不一定百分百可信，出现问题还是要打印对象看
这个控件用于描述地图上一段距离代表的实际长度，他会根据你的实际缩放比例调整文案：
// 添加事件map.addEventListener('zoomstart', function(){console.Zoom());})let scaleCtrl = new BMapGL.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})map.addControl(scaleCtrl)
即可以自定义百度地图的部分样式，例如地图上面区域换一个颜色，路径换一个颜色等等。
这里我们可以前往百度的个性化地图中编辑，通过一些样式模板以及二次操作来生成最后的地图样式：
.php?title=open/custom
最后配置好了之后可以发布样式，同时获取一个样式ID，在我们的代码中新增：
map.setMapStyleV2({styleId:'xxxxx'})
就可以生效新的样式了！
另外也可以获取配置的JSON文件，然后复制到本地：
map.setMapStyleV2({styleJson:{...}})
本文发布于:2024-02-01 08:27:27，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170674724735236.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
