开发指南

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

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

基础知识

示例

开始学习凯立德地图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 type="text/javascript" src="https://mapapi.careland.com.cn/v6/api/?key=您的密钥&v=6.0.0" charset="utf-8"></script>
<title>地图应用</title>
</head>
<body>
<div id="map" style="width:500px;height:400px;"></div>
</body>
</html>

脚本代码：

<script type="text/javascript">
let point = new KMap.Point(114.023074,22.534746); //创建地图中心点
let map = new KMap.Map("map",{
    center: point,
    zoom: 15
}); //创建地图对象
</script>

2.1 引用地图API文件

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

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

2.2 创建地图容器元素

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

2.3 命名空间

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

2.4 创建点坐标

let point = new KMap.Point(114.023074,22.534746);

这里我们使用KMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中114.023074表示经度，22.534746表示纬度。

2.5 创建地图实例和初始化

let map = new KMap.Map("map",{
    center: point,
    zoom: 15
});

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

2.6 地图操作

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

<script  type="text/javascript">
let point = new KMap.Point(114.023074,22.534746); //创建地图中心点
var map = new Careland.Map("map",{
    center: point,
    zoom: 15
}); //创建地图对象
window.setTimeout(function(){map.flyTo(new KMap.Point(116.3974025,39.9179775));}, 2000);
</script>