凯立德开放平台 - JavaScript API 开发指南

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

基础知识

示例

开始学习凯立德地图JavaScript API触控版最简单的方式是看一个简单的示例。以下代码创建了一个全屏的地图区域并以上海东方明珠作为地图的中心。

页面HTML:

<!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" />
<script language="javascript" type="text/javascript" src="http://mapapi.careland.com.cn/mobile/api/?key=您的密钥&v=1.2" charset="utf-8"></script>
<title>地图应用</title>
</head>
<body>
<div id="mymap" style="width:100%;height:100%;"></div>
</body>
</html>

脚本代码:

2.1 引用地图API文件

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

2.2 创建地图容器元素

2.3 命名空间

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

2.4 创建点坐标

var point = new Careland.Point(437733644, 112697303);

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

2.5 创建地图实例

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

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

2.6 地图初始化

map.load();

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

2.7 地图操作

地图被实例化并完成初始化以后，就可以与其进行交互了。它支持触控平移、双指放大/缩小等交互功能。您也可以修改配置来改变这些功能，以便个性化地适应你的操作习惯。

比如: 你要禁用双指触控缩放(默认启用)，可以

map.disablePinchToZoom();

您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、pan()、zoomIn()、zoomOut()等等。