MapBar的Api使用简略说明（上）

Mapbar也是一个地图服务提供商，和google map，51tidu等类似。用过地图Api就会发现它们大同小异。

Mapbar的map api最新版31.1有13个主要的类，可以参看类参考。

比较重要的是Maplet（实例化一个地图，一般放在一个div里），MMarker（地图标记），MPoint（地理坐标点），MEvent（地图事件）。MStanderControl和MEventListener也是很常用的类。

 

地图API的使用，首先要将API引入，代码如下：

<script type="text/javascript" src="http://union.mapbar.com/apis/maps/free?f=mapi&v=31.1  
                                         &k=地图API"></script>

 三个参数，f的值表示要使用的API，使用地图API的话参数就是mapi，v是表示版本，k是指对你申请的API密匙，测试的话可以先用“aCW9cItqL6QpaR0pLh8mcBEmcn4eb79hMYF5MXTrEeJsT7J6T7P9TRD7El==@7aMhs7F4s54ecLYLQpaB7T7h95MpsccQpMEMFp79W9pRs5qRp9cWphcraC0pFslFAV=”试试。

初始化一个地图：

var maplet = null;
 function initMap(){
 maplet = new Maplet("mapbar");
 maplet.centerAndZoom(new MPoint(116.38672,39.90805), 8);
 maplet.addControl(new MStandardControl());
}

 初始化的就是以北京为中心的一个地图，mapbar是指你地图容器的名称，一般是一个DIV。MPoint是指定的中心点，两个参数分别是纬度和经度，最好能够在java中得到float型的变量传过来。8指的是缩放级别，0到13的整数都是有效的。数字越大表示地图越详细。

 

 还有一系列常用的事件，比如放大缩小。

function zoomIn(){
	maplet.zoomIn();
}
function zoomOut(){
	maplet.zoomOut();
}

 在html代码中加入

<button TYPE=button onclick="zoomIn();">zoomIn</button>
<button TYPE=button onclick="zoomOut();">zoomOut</button>

 就可以实现自定义的放大缩小。

 

 然后可以在地图上添加叠加层 ，比如一个标注。

然后添加一个标注：

		function addMarker(){
		 var marker = new MMarker(
		 new MPoint(116.38672,39.90805),
		 new MIcon("Winter.jpg",32,32)
		 );
		 maplet.addOverlay(marker);
		 }

 

一个Marker就是一个坐标加一个图标，然后要将它加入到地图中去。移除的话可以用

function removeMarker(){
	maplet.removeOverlay(marker);
	//或者maplet.clearOverlays();清除所有的。
}

 

 

 

默认完成的地图上有许多的控件 ，内置的有缩略图，比例尺，平移/缩放控件。

 

以缩略图为例子：

var visible = true;
var status = true;
function changeOverViewVisible(){
visible=!visible;
	//status=!status;
	maplet.showOverview(visible, status);
	
}
function changeOverViewStatus(){
//visible=!visible;
	status=!status;
	maplet.showOverview(visible, status);
	
}

 

<button TYPE=button onclick="changeOverViewVisible();">changeOverViewVisible</button>
<button TYPE=button onclick="changeOverViewStatus();">changeOverViewStatus</button>