(未显示1个用户的5个中间版本) | |||
第1行: | 第1行: | ||
{{jspopularGL-sidebar}} | {{jspopularGL-sidebar}} | ||
− | <div class="bluetitle"><div class=" | + | <div class="h1-title">添加控件</div><div id="update-time1">更新时间:2022年08月07日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">控件是负责与地图交互的UI元素,百度地图JS API支持比例尺、缩放、定位、城市选择列表、版权,以及自定义控件。</div><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/webgl2_0.htm"></div><div class="top_right">[http://lbs.baidu.com/jsdemo.htm#webgl2_0 DEMO详情]</div></div><div class="serve-explain-text">详情可见[http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html 类参考]。</div> |
{| width="507" border="1" | {| width="507" border="1" | ||
|- | |- | ||
第17行: | 第17行: | ||
| 缩放 | | 缩放 | ||
| ZoomControl | | ZoomControl | ||
− | | 默认位于地图右下方,控制地图级别的缩放 | + | | 默认位于地图右下方,控制地图级别的缩放 |
+ | |- | ||
+ | | 定位 | ||
+ | | LocationControl | ||
+ | | 默认位于地图左下方,用于获取定位 | ||
+ | |- | ||
+ | | 城市选择列表 | ||
+ | | CityListControl | ||
+ | | 默认位于地图左上方,用于进行城市选择定位 | ||
+ | |- | ||
+ | | 版权 | ||
+ | | CopyrightControl | ||
+ | | 默认位于地图左下方,用于展示版权信息 | ||
|} | |} | ||
− | <br/><div class="bluetitle"><div class=" | + | <br/><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>向地图添加控件</span></div></div></div><div class="serve-explain-text">使用Map.addControl()方法向地图添加控件。</div><div class="devguide"><div class="leftborderbg" style="height:180px;"></div><div class="devguideorder"><span>1</span>参考展示地图教程完成地图初始化</div><div class="devguidecenter"><pre class="prettyprint codestyle"><!DOCTYPE html> |
<html> | <html> | ||
<head> | <head> | ||
第43行: | 第55行: | ||
map.addControl(scaleCtrl); | map.addControl(scaleCtrl); | ||
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件 | var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件 | ||
− | map.addControl(zoomCtrl); | + | map.addControl(zoomCtrl); |
+ | var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件 | ||
+ | map.addControl(cityCtrl); | ||
</pre> | </pre> | ||
− | </div></div><div class="bluetitle"><div class=" | + | </div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>控制控件位置</span></div></div></div><div class="serve-explain-text">初始化控件时,可提供一个可选参数,其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置,即控件停靠在地图的哪个角。当地图尺寸发生变化时,控件会根据停靠位置的不同来调整自己的位置。</div> |
{| width="359" border="1" | {| width="359" border="1" | ||
|- | |- | ||
第63行: | 第77行: | ||
| 表示控件定位于地图的右下角 | | 表示控件定位于地图的右下角 | ||
|} | |} | ||
− | <div class="bluetitle"><div class=" | + | <div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>控件位置偏移</span></div></div></div><div class="serve-explain-text"> |
除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同,那么控件可能会重叠在一起,这时就可以通过偏移值使二者分开显示。 | 除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同,那么控件可能会重叠在一起,这时就可以通过偏移值使二者分开显示。 | ||
如下示例为:将比例尺放置在地图的左下角,由于API默认会有版权信息,因此需要添加一些偏移值以防止控件重叠。 | 如下示例为:将比例尺放置在地图的左下角,由于API默认会有版权信息,因此需要添加一些偏移值以防止控件重叠。 | ||
− | </div><pre class="prettyprint codestyle">var opts = {offset: new BMapGL.Size(150, 5)} | + | </div><pre class="prettyprint codestyle">var opts = { |
+ | offset: new BMapGL.Size(150, 5) | ||
+ | } | ||
+ | // 添加控件 | ||
map.addControl(new BMapGL.ScaleControl(opts)); | map.addControl(new BMapGL.ScaleControl(opts)); | ||
+ | // 移除控件 | ||
+ | map.removeControl(new BMapGL.ScaleControl(opts)); | ||
</pre> | </pre> | ||
<div class="bluetitle"><div class="services-title-text"></div></div><div id="gtx-trans" style="position: absolute; left: 532px; top: 995px;"><div class="gtx-trans-icon"></div></div> | <div class="bluetitle"><div class="services-title-text"></div></div><div id="gtx-trans" style="position: absolute; left: 532px; top: 995px;"><div class="gtx-trans-icon"></div></div> |
2022年8月19日 (五) 13:22的最后版本
添加控件
更新时间:2022年08月07日
简介
控件是负责与地图交互的UI元素,百度地图JS API支持比例尺、缩放、定位、城市选择列表、版权,以及自定义控件。
详情可见类参考。
控件 | 类名 | 简介 |
抽象基类 | Control | 所有控件均继承此类的方法、属性。通过此类您可实现自定义控件 |
比例尺 | ScaleControl | 默认位于地图左下方,显示地图的比例关系 |
缩放 | ZoomControl | 默认位于地图右下方,控制地图级别的缩放 |
定位 | LocationControl | 默认位于地图左下方,用于获取定位 |
城市选择列表 | CityListControl | 默认位于地图左上方,用于进行城市选择定位 |
版权 | CopyrightControl | 默认位于地图左下方,用于展示版权信息 |
向地图添加控件
使用Map.addControl()方法向地图添加控件。
1参考展示地图教程完成地图初始化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script> <title>地图展示</title> </head> <body></body> </html> <script type="text/javascript"> // GL版命名空间为BMapGL // 按住鼠标右键,修改倾斜角和角度 var map = new BMapGL.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 </script>
2声明控件并添加到地图中
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件 map.addControl(scaleCtrl); var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件 map.addControl(zoomCtrl); var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件 map.addControl(cityCtrl);
控制控件位置
初始化控件时,可提供一个可选参数,其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置,即控件停靠在地图的哪个角。当地图尺寸发生变化时,控件会根据停靠位置的不同来调整自己的位置。
anchor值 | 位置说明 |
BMAP_ANCHOR_TOP_LEFT | 表示控件定位于地图的左上角 |
BMAP_ANCHOR_TOP_RIGHT | 表示控件定位于地图的右上角 |
BMAP_ANCHOR_BOTTOM_LEFT | 表示控件定位于地图的左下角 |
BMAP_ANCHOR_BOTTOM_RIGHT | 表示控件定位于地图的右下角 |
控件位置偏移
除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同,那么控件可能会重叠在一起,这时就可以通过偏移值使二者分开显示。
如下示例为:将比例尺放置在地图的左下角,由于API默认会有版权信息,因此需要添加一些偏移值以防止控件重叠。
var opts = { offset: new BMapGL.Size(150, 5) } // 添加控件 map.addControl(new BMapGL.ScaleControl(opts)); // 移除控件 map.removeControl(new BMapGL.ScaleControl(opts));