超高性价比的GIS API 简介

本文链接：https://blog.csdn.net/shenqiang198956/article/details/37690563

开始学习siteMap jsAPI最简单的方式是看一个简单的示例。以下代码创建了一个地图并以东方明珠作为地图的中心：

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>siteMap Hello_Word</title>
<script type="text/javascript" src="http://211.136.131.242:8087/api/map.js?key=您的密钥">
</script>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
</head>
<body>
<div id="div_map"></div>
<script type="text/javascript">
var map=null;
map=new STMapObj("div_map"); //创建地图
var point=new STMapPoint(121.499712,31.239701);//创建点坐标
map.locateMap(point,2);// 初始化
map.setZoomCompVisible(true); //显示缩放控件
map.setScaleCompVisible(true); // 显示比例尺控件
</script>
</body>
</html>

根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明：

查看文本复制打印 ?

<!DOCTYPE html>

接着我们设置样式，使地图充满整个浏览器窗口：

查看文本复制打印 ?

<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>

引用方式：

<script type="text/javascript" src="http://211.136.131.242:8087/api/map.js?key=您的密钥"></script>

创建地图容器元素

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

var map = new STMapObj("div_map");

位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

注意在调用此构造函数时应确保容器元素已经添加到地图上。

var point=new STMapPoint(121.499712,31.239701);

这里我们使用STMapPoint类来创建一个坐标点。Point类描述了一个地理坐标点，其中121.499712表示经度，31.239701表示纬度。

map.locateMap(point,2);

在创建地图实例后，我们需要对其进行初始化，map.locateMap()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。

地图被实例化并完成初始化以后，就可以与其进行交互了。API中的地图对象支持鼠标拖拽、滚轮缩放、双击放大等交互功能。

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

下面示例显示一个地图，等待两秒钟后，setCenter()方法将让地图的级别设置为10

var map=null;