Hello World

开始学习

开始学习GeoGlobeSDK地图API最简单的方式是看一个简单的示例。以下代码创建了一个地图并以福州市区作为地图的中心:

<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
	<title>Hello, World</title>
	//GeoGlobe地图开发库
	<script type="text/javascript" src="/geomap-api/JsCodeDemo/js/api.js"></script>
	<link href="/geomap-api/JsCodeDemo/css/demoComm.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
	<div id="simpleMap"></div>
	<script type="text/javascript">
	//构造地图对象实例,并添加到id为simpleMap的div容器中。参数选项中layerGroupLoaded设置为true,表示实例化一个地图对象时,默认会加载一组底图图层
								var map = new Geo.View2D.Map("simpleMap", {layerGroupLoaded: true});
	//定位到福州市区中心点
	map.setCenter(new Geo.LonLat(118.77, 32.05));
	</script>
	</body>
</html>
准备工作

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

<!DOCTYPE html>

您也可以根据需要选择其他类型的文档声明,这样浏览器会以标准的方式对页面进行渲染,保证页面最大的兼容性。

引用GeoGlobeSDK地图API文件

在页面上需要引用一个JS文件。

<script type="text/javascript" src="/geomap-api/JsCodeDemo/js/api.js"></script>

接着我们引用css文件,这个css文件包含一些通用的样式。
<link href="/geomap-api/JsCodeDemo/css/demoComm.css" rel="stylesheet" type="text/css"/>
创建地图容器元素

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

<div id="simpleMap"></div>

命名空间API使用Geo作为命名空间,所有类均在该命名空间之下,比如:Geo.View2D.Map、Geo.View2D.Control、Geo.View2D.Layer、Geo.Geometry等。

创建地图实例
//构造地图对象实例,并添加到id为simpleMap的div容器中。参数选项中layerGroupLoaded设置为true,表示实例化一个地图对象时,默认会加载一组底图图层。
var map = new Geo.View2D.Map("simpleMap", {layerGroupLoaded: true});

位于Geo命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其第一个参数可以是元素id也可以是元素对象。第二个参数可以通过设置属性layerGroupLoaded的值为true,来默认加载一组天地图底图图层。如果设置为false,则不会默认加载底图图层。(注意在调用此构造函数时应确保容器元素已经添加到地图上)

创建点坐标,并在地图定位到福州市区中心点

这里我们使用Geo命名空间下的LonLat类来创建一个坐标点。Geo.LonLat类描述了一个地理坐标点,其中118.77表示经度,32.05表示纬度。

//定位到福州市区中心点
map.setCenter(new Geo.LonLat(118.77, 32.05));

地图必须经过定位后才可以执行其他操作。在以上地图示例代码完成以后,就可以在浏览器上与其进行交互了。