- 1.siteMap地图的“Hello, World”
- 2.地图配置与操作
-
siteMap地图的“Hello, World”
开始学习siteMap jsAPI最简单的方式是看一个简单的示例。以下代码创建了一个地图并以东方明珠作为地图的中心:
- <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>
<!DOCTYPE html>
接着我们设置样式,使地图充满整个浏览器窗口:
- <style type="text/css">
- body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
- </style>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
引用siteMap API文件
引用方式:
<script type="text/javascript" src="http://211.136.131.242:8087/api/map.js?key=您的密钥"></script>
创建地图容器元素
地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个div元素。
创建地图实例
位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
注意在调用此构造函数时应确保容器元素已经添加到地图上。
创建点坐标
这里我们使用STMapPoint类来创建一个坐标点。Point类描述了一个地理坐标点,其中121.499712表示经度,31.239701表示纬度。
地图初始化
在创建地图实例后,我们需要对其进行初始化,map.locateMap()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。
地图配置与操作
地图被实例化并完成初始化以后,就可以与其进行交互了。API中的地图对象支持鼠标拖拽、滚轮缩放、双击放大等交互功能。
此外,您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如:setCenter()、setZoom()、pan()等等。
下面示例显示一个地图,等待两秒钟后,setCenter()方法将让地图的级别设置为10
- map=new STMapObj("div_map");
- map.locateMap(new STMapPoint(121.43745399,31.211535),8);
- setTimeout(function(){
- map.setZoom(10); //放到到10级
- }, 2000);
- map.setZoomCompVisible(true);
- map.setScaleCompVisible(true);