关于如何在网站中插入百度地图，这个很多人还不知道，今天团团来为大家解答以上的问题，现在让我们一起来看看吧！

百度地图控件，则是在地图容器中集成一些稍微复杂的功能。百度地图官方的控件的解释如下：

控件是负责与地图交互的UI元素，百度地图API支持比例尺、缩放、定位、城市选择列表、版权，以及自定义控件。

类说明

百度地图所有的控件类继承与基类Control，Control是所有控件的基类，可以通过此类来实现自定义控件。所有控件均包含Control类的属性、方法和事件。
百度地图默认自带比例尺、缩放、定位、城市选择列表、版权这五种控件，往地图添加这五种控件时，不需要具体实现控件的业务逻辑，直接添加即可。

添加控件

对于百度地图自带的五种控件，在地图初始化完成后，直接往地图添加即可。

const scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件map.addControl(scaleCtrl);const zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件map.addControl(zoomCtrl);const cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件map.addControl(cityCtrl);// 其他两种控件添加方法类似// ...

控制控件位置

初始化控件时，可提供一个可选参数，其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置，即控件停靠在地图的哪个角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整自己的位置。

下面以缩放控件为例，来说明一下对于控件位置的控制。
官网中对于缩放控件ZoomControl构造函数的定义如下：

其中缩放控件参数ZoomControlOptions的描述如下：

ControlAnchor表示控件位置的常量，可选为以下四个值：

初始化地图并添加缩放控件

tvar map = new BMapGL.Map("allmap");    // 创建Map实例map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件map.addControl(zoomCtrl);

地图初始化后实际效果如下图，可以看到缩放控件默认置于地图右下方：

控制缩放控件位置

缩放控件ZoomControl创建时，传递参数anchor即可控制控件显示位置。

    var map = new BMapGL.Map("allmap");map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);var zoomCtrl = new BMapGL.ZoomControl({anchor: BMAP_ANCHOR_TOP_RIGHT });  // 添加比例尺控件，并将anchor属性设置为BMAP_ANCHOR_TOP_RIGHT，即右上方map.addControl(zoomCtrl);

可以看到缩放控件显示在了地图容器的右上方了。

控制缩放控件偏移

除了在控件ZoomControl创建时，传递参数anchor控制控件显示位置，还可以传递参数offset来控制偏移量。注意的是如果不设置offset参数，控件默认是带有一定的偏移的。偏移量是相对于地图容器四个角落进行偏移的。

    var map = new BMapGL.Map("allmap");map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);var zoomCtrl = new BMapGL.ZoomControl({anchor: BMAP_ANCHOR_TOP_RIGHT,offset: new BMapGL.Size(30, 40)  // offset设置为30，40，即相对于右上角左移30px，下移40px});map.addControl(zoomCtrl);

可以看到加了偏移offset参数之后，缩放控件相对于之前，有了明显的偏移。

上面已缩放控件ZoomControl为例讲解了百度地图自带控件的用法，其他几种自带控件的用法类似。

本文到此结束，希望对大家有所帮助。