地图控件

您当前的位置：首页 > JavaScript API 触控版 > 地图控件

3.1 地图控件
3.2 添加控件
3.3 移除控件
3.4 设置控件属性
3.5 信息窗口
3.6 自定义控件

地图控件

3.1 地图控件

负责与地图交互的UI元素称为控件。地图API触控版中提供的控件有：

控件名	说明	详细说明
Control	控件的抽象基类	所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
Navigation	地图缩放控件	提供放大缩小操作
Scale	比例尺控件	默认位于地图左下方，显示地图的比例关系
InfoWindow	信息窗口控件	用于创建信息窗口显示信息

3.2 添加控件

可以使用Careland.Map.addMapControl ()方法向地图添加控件。在此之前地图需要进行初始化。例如，要将比例尺控件添加到地图中，可在代码中添加如下内容：

var scale = new Careland.Scale();
map.addMapControl(scale);

3.3 移除控件

可以使用Careland.Map.removeMapControl ()方法移除地图控件。如：
```
map.removeMapControl(scale);
```

3.4 设置控件属性

初始化控件后，可设置配置参数，调整地图控件的外观。

var control = new Careland.Navigation();
control. offset = new Careland.Size(10, 30);
control. anchor = CLDMAP_ANCHOR_TOP_LEFT;
map.addMapControl(control);

3.5 信息窗口

信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。您可以使用InfoWindow来创建一个信息窗实例，注意相同ID的信息窗口在地图上只能有一个信息窗口处于打开状态。

var opts = {
  id: "testWin", //信息窗口唯一ID
  width : 250, // 信息窗口宽度
  height : 100, // 信息窗口高度
  title : "Hello", // 信息窗口标题
  content : "World" //信息窗口内容
};
var infoWindow = new Careland.InfoWindow(opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口

3.6 自定义控件

凯立德地图API允许您通过继承Control来创建自定义地图控件。
要创建可用的自定义控件，您需要做以下工作：
1.定义一个自定义控件的构造函数；
2.设置自定义控件构造函数的prototype属性为Control的实例，以便继承控件基类；
3.实现initialize()方法并提供defaultAnchor和defaultOffset属性。
定义构造函数并继承Control
首先您需要定义自定义控件的构造函数，并在构造函数中提供defaultAnchor和defaultOffset两个属性，以便API正确定位控件位置，接着让其继承于Control。在下面的示例中我们定义一个名为ZoomControl的控件，每一次点击将地图放大两个级别。它具有文本标识，而不是平移缩放控件中使用的图形图标。

// 定义一个控件类，即function
function ZoomControl(){
  // 设置默认停靠位置和偏移量
  this.defaultAnchor = CLDMAP_ANCHOR_TOP_RIGHT;
  this.defaultOffset = new Careland.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于Careland.Control
ZoomControl.prototype = new Careland.Control();

初始化自定义控件
当调用map.addMapControl()方法添加自定义控件时，API会调用该对象的initialize()方法用来初始化控件，您需要实现此方法并在其中创建控件所需的DOM元素，并添加DOM事件。initialize()方法需要返回控件容器的DOM元素。

// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回
// 在本方法中创建一个div元素作为控件的容器，并将其返回
  ZoomControl.prototype.initialize = function(map){
  // 创建一个DOM元素
  var div = document.createElement("div");
  // 添加文字说明
  div.appendChild(document.createTextNode("放大2级"));
  // 设置样式
  div.style.cursor = "pointer";
  div.style.border = "1px solid #ccc";
  div.style.backgroundColor = "white";
  // 绑定事件，点击一次放大两级
  div.onclick = function(e){
    map.setZoom (map.getZoom() + 2);
  };
  // 将DOM元素返回
  return div;
};

添加自定义控件
添加自定义控件与添加其他控件方法一致，调用map.addMapControl()方法即可。

// 创建控件实例
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addMapControl(myZoomCtrl);