开发指南

您当前的位置：首页> JavaScript API 通用版 > 开发指南

2.1 引用地图API文件
2.2 创建地图容器元素
2.3 命名空间
2.4 创建点坐标
2.5 创建地图实例
2.6 地图初始化
2.7 地图操作

基础知识

示例

开始学习凯立德地图JavaScript API最简单的方式是看一个简单的示例。以下代码创建了一个500乘400大小的地图区域并以深圳作为地图的中心。
页面HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="http://mapapi.careland.com.cn/api/?key=您的密钥&v=1.2" charset="utf-8"></script>
<title>地图应用</title>
</head>
<body>
<div id="mymap" style="width:500px;height:400px;"></div>
</body>
</html>

脚本代码：

<script language="javascript" type="text/javascript">
var point = new Careland.Point(410942332,81392068); //创建地图中心点
var map = new Careland.Map("mymap",point,10); //创建地图对象
map.enableCenterIcon(); //启用地图中心点图标
map.load(); //加载地图
</script>

2.1 引用地图API文件

引用地图API文件时，需要指定二个参数：key=您的密钥；v=版本号。您需要先申请密钥，才可使用。

<script language="javascript" type="text/javascript" src="http://mapapi.careland.com.cn/api/?key=您的密钥&v=1.2" charset="utf-8"></script>

2.2 创建地图容器元素

<div id="mymap" style="width:500px;height:400px;"></div>

2.3 命名空间

API使用Careland作为命名空间，所有类均在该命名空间之下，比如：Careland.Map、Careland.Point、Careland.Layer。

2.4 创建点坐标

var point = new Careland.Point(410942332,81392068);

这里我们使用Careland命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中410942332表示横向坐标，81392068表示纵向坐标。

2.5 创建地图实例

var map = new Careland.Map("mymap",point,10);

位于Careland命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数分别为元素id、中心点坐标、显示级别。注意在调用此构造函数时应确保容器元素已经添加到地图上。

2.6 地图初始化

var map = new Careland.Map("mymap",point,10);

在创建地图实例后，我们需要对其进行初始化，地图必须经过初始化才可以执行其他操作。

2.7 地图操作

地图被实例化并完成初始化以后，就可以与其进行交互了。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能，也支持健盘移动等操作。您也可以修改配置来改变这些功能，以便个性化地适应你的操作习惯。比如: 你要禁用双击放大(默认启用)，可以
```
map.disableDoubleClickZoom();
```
您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、pan ()、zoomIn ()、zoomOut ()等等。
如下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。

<script language="javascript" type="text/javascript">
var point = new Careland.Point(410942332,81392068); //创建地图中心点
var map = new Careland.Map("mymap",point,10); //创建地图对象
map.load(); //加载地图
window.setTimeout(function(){map.setCenter(new Careland.Point(413942332,85392068));}, 2000);
</script>