您当前的位置:首页 > JavaScript API 触控版 > 开发指南

地图控件

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);

  • Copyright©2012-2021 careland All Right Reserved
  • 深圳市凯立德科技股份有限公司 版权所有
  • 备案号: 粤ICP备05072496号-10