浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。
(以“{{jspopularGL-sidebar}} <div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text">百度地图上负责与地图交...”为内容创建页面)
 
 
(未显示1个用户的1个中间版本)
第15行: 第15行:
 
| 默认位于地图左下方,显示地图的比例关系
 
| 默认位于地图左下方,显示地图的比例关系
 
|-
 
|-
| 地图类型
+
| 缩放
 
| ZoomControl
 
| ZoomControl
| 默认位于地图右下方,控制地图级别的缩放
+
| 默认位于地图右下方,控制地图级别的缩放<br/>
 
|}
 
|}
<div class="bluetitle"><div class="services-title-text">向地图添加控件</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>
+
<br/><div class="bluetitle"><div class="services-title-text">向地图添加控件</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>
第42行: 第42行:
 
</div><div class="devguideorder"><span>2</span>声明控件并添加到地图中</div><div class="devguidecenter"><pre class="prettyprint codestyle">var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
 
</div><div class="devguideorder"><span>2</span>声明控件并添加到地图中</div><div class="devguidecenter"><pre class="prettyprint codestyle">var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
 
map.addControl(scaleCtrl);
 
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
+
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
 
map.addControl(zoomCtrl);   
 
map.addControl(zoomCtrl);   
 
</pre>
 
</pre>

2020年7月31日 (五) 07:55的最后版本

简介
百度地图上负责与地图交互的UI元素称为控件。
详情可见类参考
控件 类名 简介
抽象基类 Control 所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
比例尺 ScaleControl 默认位于地图左下方,显示地图的比例关系
缩放 ZoomControl 默认位于地图右下方,控制地图级别的缩放

向地图添加控件
使用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);   
控制控件位置
初始化控件时,可提供一个可选参数,其中的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));
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消