第1行: | 第1行: | ||
{{subway-sidebar}} | {{subway-sidebar}} | ||
− | <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">百度地图上负责与地图交互的UI元素称为控件。百度地铁图提供了用来操作地铁图属性的控件。<br/></div><!--jsapi-demo模板--><div class="aloneDemo"><div dir="http://lbsyun.baidu.com/cms/jsapi/demo/jsapiSubway/subway1_0.html"></div><div class="top_right">[http://lbsyun.baidu.com/jsdemo.htm#subway1_0 DEMO详情]</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">详情可见[http://lbsyun.baidu.com/cms/jsapi/reference/subway.html#a2b0 类参考]。</div> |
{| width="507" border="1" | {| width="507" border="1" | ||
|- | |- | ||
第11行: | 第11行: | ||
| 提供缩放地图的功能 | | 提供缩放地图的功能 | ||
|} | |} | ||
− | <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">可以使用Subway.addControl()方法向地铁图中添加控件。</div><div class="devguide"><div class="leftborderbg" style="height:180px;"></div><div class="devguideorder"><span>1</span>地图初始化</div><div class="devguidecenter">添加控件前,需要初始化地铁图。详细的步骤可以参考[https://lbsyun.baidu.com/index.php?title=subway/guide/helloworld 入门指南]<pre class="prettyprint codestyle">// 获取北京地铁数据-初始化地铁图 |
var subway = new BMapSub.Subway('container', subwaycity.citycode); | var subway = new BMapSub.Subway('container', subwaycity.citycode); | ||
</pre> | </pre> | ||
第20行: | 第20行: | ||
subway.addControl(zoomControl); | subway.addControl(zoomControl); | ||
</pre> | </pre> | ||
− | </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" | ||
|- | |- | ||
第38行: | 第38行: | ||
| 表示控件定位于地铁图的右下角 | | 表示控件定位于地铁图的右下角 | ||
|} | |} | ||
− | <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"> |
除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。例如上文代码的写法,会以地铁图右下角为基准点,向左移动10像素,向上移动100像素。 | 除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。例如上文代码的写法,会以地铁图右下角为基准点,向左移动10像素,向上移动100像素。 | ||
− | </div> | + | </div></div> |
2022年8月19日 (五) 14:26的最后版本
简介
百度地图上负责与地图交互的UI元素称为控件。百度地铁图提供了用来操作地铁图属性的控件。
提供的控件
详情可见类参考。
控件 | 类名 | 简介 |
缩放控件 | ZoomControl | 提供缩放地图的功能 |
向地图添加控件
可以使用Subway.addControl()方法向地铁图中添加控件。
1地图初始化
添加控件前,需要初始化地铁图。详细的步骤可以参考入门指南
// 获取北京地铁数据-初始化地铁图 var subway = new BMapSub.Subway('container', subwaycity.citycode);
2添加缩放控件
在本例中我们向地铁图中添加一个缩放控件。首先需要初始化一个缩放控件对象,之后调用Subway.addControl()方法把控件添加到地铁图中。
var zoomControl = new BMapSub.ZoomControl({ anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT, offset: new BMapSub.Size(10,100) }); subway.addControl(zoomControl);
控制控件位置
初始化控件时,可提供一个可选参数,其中的anchor和offset属性共同控制控件在地铁图上的位置。 anchor表示控件的停靠位置,即控件停靠在地铁图的哪个角。当地铁图尺寸发生变化时,控件会根据停靠位置的不同来调整自己的位置。
anchor值 | 位置说明 |
BMAPSUB_ANCHOR_TOP_LEFT | 表示控件定位于地铁图的左上角 |
BMAPSUB_ANCHOR_TOP_RIGHT | 表示控件定位于地铁图的右上角 |
BMAPSUB_ANCHOR_BOTTOM_LEFT | 表示控件定位于地铁图的左下角 |
BMAPSUB_ANCHOR_BOTTOM_RIGHT | 表示控件定位于地铁图的右下角 |
控件位置偏移
除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。例如上文代码的写法,会以地铁图右下角为基准点,向左移动10像素,向上移动100像素。