51ditu API 地图插件Mapplet

　首页>>Mapplet开发文档

Mapplet 开发文档

本文档是灵图提供的API文档的一部分，本文档讲述Mapplet的开发过程和参考文件。
更多详细的使用范例和说明请访问51ditu API开发文档页面。
API使用交流清访问51ditu产品论坛。

什么是Mapplet?

怎么用Mapplet?

Mapplet文件格式

Mapplet JavaScript API参考

如何在Mapplet之中引用.JS文件

1.什么是Mapplet?

Mapplet是一个地图平台，开发者可以通过该平台轻松的开发基于地图的应用并提供给用户，Mapplet会带来以下好处：
·对于Maplets提供者：
·可以宣传自己的品牌
·带来更多的流量(详细信息可以连接到提供者的网站)
对于51ditu普通用户：
·更多的服务选择
·更多的信息内容

2.怎么用Mapplet?

开发者按照相应的标准开发自己的Mapplet，开发的过程之中，可以使用Mapplet平台轻松的预览自己的Mapplet效果，然后并上传到自己的网站或其他能访问的地址，最后在Mapplet平台上发布该Mapplet即可；而普通用户则只需在Mapplet平台上选择自己需要的功能即可体验到丰富的地图功能。

3.Mapplet文件格式

Mapplet是一个完整的XML文件，我们也建议直接使用.xml扩展名来存放该XML文件，为便于理解该XML文件的格式，提供XML的文档范例如下：
（您可以打开如下网址查看该XML：mapplet_helloworld.xml）

上面是一个简单的Mapplet文件，XML之中包含如下标签：

节点或属性名称	说明
节点 mapplet	Mapplet文件的XML根节点，该节点必须作为根节点且只有一个
节点 Property	该节点包含Mapplet的属性信息，例如Mapplet名称，作者名称，缩略图路径，需要加载的JavaScript库等
节点 Content	该节点包含Mapplet的内容，该节点的内容应该是一段HTML（其中可以包含JavaScript代码），在Mapplet加载的时候，将会加载该HTML内容并运行其中的JavaScript代码。
属性 title	该属性的值为该Mapplet的名称，该名称将会显示在Mapplet列表之中。
属性 author	该属性的值为该Mapplet的作者名称，当用户选择自己需要的Mapplet的时候，将会看到作者名称。
属性 email	该属性的值为该Mapplet的作者email地址。
属性 screenshot	该属性的值为一个URL地址，代表该Mapplet运行状态的屏幕截图的路径地址,建议该图片小为280x290大小。
属性 thumbnail	该属性的值为一个URL地址，代表该Mapplet的缩略图的路径，该缩略图将会在用户选择自己需要的Mapplet的时候显示 ,建议该图片大小为140*80大小，如果采用其他大小的图片，可能在显示上出现变形(参考图片)。
属性 site	该属性的值为一个URL地址，代表该Mapplet所属的站点，可以是作者的网站或博客地址，或者是该Mapplet的讨论组。

4.Mapplet JavaScript API参考

在Mapplet的Content节点之中，包含用户为Mapplet编写的HTML内容和JavaScript代码，开发者可以和开发普通的HTML一样开发Mapplet。
在Mapplet之中，已经加载了51ditu Maps API,因此，在51ditu Maps API之中的类都可以使用，另外还可以使用已经创建好的mapplet对象(LTMapplet类的一个实例)，因此您可以使用以下类参考文件之中的类和方法。
·51ditu Javascript API AJAX类参考文档
·51ditu Maps API类参考文档
需要注意以下几点：
·在Mapplet之中通过LTMaps类的构造函数创建一个地图的时候，不需要传递任何参数,这一点和普通页面上使用API略有不同，也正因为如此，不能在页面上显示多个地图。
·在Mapplet卸载的时候，会自动清除该Mapplet执行过的操作，然而为了保持系统的稳定性，建议Mapplet不要更改地图的UI样式(例如更改地图的双击放大，禁止地图拖动等)。
·在Mapplet之中，不支持自定义控件类型，自定义标注类型。

5.如何在Mapplet之中引用.JS文件

虽然Mapplet之中已经可以直接使用51ditu Maps api,51ditu Ajax API而不需要引用任何文件，在某些情况下，可能还需要加载用户自己的JS文件来完成某些功能，因为Mapplet之中引入JS文件和html页面之中的情况略有不同，因此，需要专门说明一下。
·首先是必须使用script标签的defer属性来加载JS文件，如果不这样做，可能造成浏览器崩溃
·因为通过defer来加载.js文件，因此页面初始化过程之中的JS代码必须考虑到该JS文件还没有加载完成的情况，因此，建议使用window.onload方法来在Mapplet完全加载完成之后再执行页面初始化代码，例如：（您可以打开如下网址查看该XML：mapplet_lmlviewer.xml）

<?xml version="1.0" encoding=""?>
<mapplet>
	<Property title="查看LML文件" description="查看LML地图标注数据，数据通过Mapplet的URL参数传递到Mapplet" author="lingtu" email="liaoqingkun@lingtu.com" screenshot="http://api.51ditu.com/bcase/images/shenyou.jpg" thumbnail="http://api.51ditu.com/bcase/images/step1.gif" site="http://www.51ditu.com">
		<Require feature="dynamic-height"/>
	</Property>
	<Content>
	
		<div id="InputDiv" style="font-size:12px;">
			LML URL:
			<input type="text" id="lmlPath2" size="10" style="font-size:12px;"/>
			<input type="button" value="加载" onClick="loadLml(document.getElementById('lmlPath').value)" style="font-size:12px;"/>
		</DIV>
		<div id="contentDiv"></DIV>
		
		<script language="javascript" src="http://api.51ditu.com/js/mapeditor.js" defer="true"></script>
		<script language="javascript">
			var map,viewer;
			function loadLml(path)
			{
				viewer.loadRemoteLmlFile(path);
			}
			function onLoad()
			{
				map=new LTMaps();
				viewer=new LTMapViewer({contentDiv:document.getElementById("contentDiv")});
				map.addControl(viewer);
				viewer.addEditor(new LTMarkerEditor());
				viewer.addEditor(new LTPolyLineEditor());
				viewer.addEditor(new LTFolderEditor());
				LTEvent.addListener(viewer,"loaded",onLmlLoaded);
				if(mapplet.getParam("url"))
				{
					loadLml(decodeURIComponent(mapplet.getParam("url")));
				}
			}
			function onLmlLoaded()
			{
				var bounds=viewer.getBounds();
				if(bounds.getXmin()>bounds.getXmax() || bounds.getYmin()>bounds.getYmax())
				{
					alert('该地图上没有任何元素');
					map.centerAndZoom("beijing",5);
				}
				else
				{
					map.centerAndZoom(bounds.getCenterPoint(),this.map.getBestZoom(bounds));
					document.getElementById("InputDiv").style.display="none";
				}
			}
			
			window.onload=onLoad;
		</script>
	
	</Content>
</mapplet>

需要注意以下几点：
·在Mapplet之中通过LTMaps类的构造函数创建一个地图的时候，不需要传递任何参数,这一点和普通页面上使用API略有不同，也正因为如此，不能在页面上显示多个地图。
·在Mapplet卸载的时候，会自动清除该Mapplet执行过的操作，然而为了保持系统的稳定性，建议Mapplet不要更改地图的UI样式(例如更改地图的双击放大，禁止地图拖动等)。
·在Mapplet之中，不支持自定义控件类型，自定义标注类型。