进阶教程 - 地图API - MapABC地图网

　　让我们从最简单的“Hello, World”开始吧。下面的例子显示一个500*400的地图，中心点位于北京的故宫博物院。
　　您可以点击“运行代码”在线运行这段代码，也可以直接在编辑框里修改代码，修改后点击“运行代码”立刻查看效果。

　　您还可以点击“复制”，把代码复制到本地运行。在本地运行时，您可能会遇到地图不显示的问题，请参考FAQ。如果您把这段代码放到您的Web服务器上运行，需要用您自己的API Key替换文件中的key。

　　在上面的例子中，地址http://api.mapabc.com/fmp/v1.0/js/fmp.js包含了在您的页面放置MapABC地图的全部JavaScript代码。您的页面必须包含指向这个地址的 script 标记，并加上您的 API Key。例如，如果您的 API Key 是"123456"，那么您的 script 标记应该类似这样：
<script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=123456"></script>
　　表示地图的类是 MMap。这个类代表页面上的单个地图。您可以根据需要创建任意多个该类的实例（一个实例对应页面上的一个地图）。在创建地图实例时，您需要指定一个页面上已命名的元素（通常是 div 元素）作为地图控件的容器。除非您明确地指定了地图的大小，默认情况下，地图大小会取决于容器的尺寸。

2.地图基本操作返回顶部

　　地图API支持基本的地图操作，如单击平移地图、拖动平移地图、双击放大、滚轮放大等，这些功能也可以通过JavaScript代码调用。
　　下面的例子运行后，在页面下方有四个按钮，分别是“拉框放大”、“拉框缩小”、“测距”和“平移地图”。测距时可以双击结束测距，也可以点击“平移地图”退出测距状态。

　移动地图返回顶部

　　下面这个例子先显示一张地图，等待2秒钟后，地图的中心会移动到一个新的坐标上。

　　鹰眼地图返回顶部

　　您可以根据需要，加载或卸载地图上的鹰眼，还可以设置鹰眼的大小比例。

小提示：修改代码中的鹰眼比例，点击“运行代码”，看看有什么效果。

3. 在地图上标注返回顶部

　　MapABC地图API提供丰富的标注功能。这个例子在地图上放置一个标注，点击标注，会打开该标注的信息窗口。当然，您也可以用方法添加标注、删除标注、打开信息窗口。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3"></script>
</head>
<body>
<div id="mapObj" style="width: 700px; height: 500px"></div>
<script type="text/javascript">

//创建一个MmapOptions对象
var mapOptions = new MMapOptions();

//设置地图组件的Id
mapOptions.mapId = "fmptest";

//设置地图的初始Zoom值
mapOptions.zoomLevel = 15;

//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");

//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);

function drawPoint(){
var pointStyle = new MStyle();
pointStyle.lineColor = 0xff0000; //设置气泡(TIP)外部 线的颜色
pointStyle.lineSize = 3; //线的宽度
pointStyle.fillColor = 0xddaabb; //气泡填充颜色
pointStyle.fillOpacity = 50; //填充的透明度
pointStyle.labelColor = 0x00ff00; //不打开气泡(TIP) 显示文字的颜色

var sContent = "<font color='#ff0000'>Hello Word!</font>小学<br>";
sContent += "<b>这个是我的加点程序!</b><br />";
sContent += "<img src='http://mapabc.com/html/images/logo.png' width='140' height='68' />";
pointStyle.textContent = sContent;

//这个点是个全局变量，以便使用removePoint删除
point = new MPointOverlay(new MLatLng("MRGYMVMLPH","KJONOWRELHL"), "加点", pointStyle, "1000");
//加true是画完点后调整视野，使点在地图的中心。
mapObj.addOverlay(point, true);
}

</script>
<input type="button" onClick="javascript:drawPoint();" value="添加点" />
<input type="button" onClick="javascript:mapObj.openTipById('1000');" value="打开该点气泡(TIP)" />
<input type="button" onClick="javascript:mapObj.removePointById('1000');" value="删除该点" />
</body>
</html>

　用图片和Flash动画标注返回顶部

　　MapABC地图API不仅提供缺省的标注样式，还允许您用图片和Flash动画标注。下面这个例子与前一个例子的功能相同，只不过是把标注点换成了Flash动画。

//创建一个MmapOptions对象
var mapOptions = new MMapOptions();

//设置地图组件的Id
mapOptions.mapId = "fmptest";

//设置地图的初始Zoom值
mapOptions.zoomLevel = 15;

//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");

//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);

//加载图片画用户自定义点
function drawCustomPointImg(){

var pointStyle = new MStyle();
pointStyle.lineColor = 0xff0000;
pointStyle.lineSize = 3;
pointStyle.fillColor = 0xddaabb;
pointStyle.fillOpacity = 50;
pointStyle.labelColor = 0x00ff00;
var sContent = "<font color='#ff0000'>中信银行富华大厦支行</font><br>";
sContent += "北京东城区朝阳门北大街8号富华大厦C座<br>";
sContent += "邮政编码：100027 <br>";
sContent += "电话：010-65543647<br>";
pointStyle.textContent = sContent;
var customPoint = new MCustomPointOverlay(new MLatLng("LQGXSKKVPDHLL","JIOMTNMTIPDLLL"), "http://api.mapabc.com/fmp/test/components/point/DynamicPoint/redbubble.swf", pointStyle, "3000");

mapObj.addOverlay(customPoint, true);//true 为自动调整视野
}

</script>
<input type="button" onClick="javascript:drawCustomPointImg();" value="添加点" />
<input type="button" onClick="javascript:mapObj.openTipById('3000');" value="打开该点气泡(TIP)" />
<input type="button" onClick="javascript:mapObj.removePointById('3000');" value="删除该点" />
</body>
</html>

小提示：用您自己的Flash动画URL或者图片的URL替换代码中的……，看看运行的效果。

　标注一组点返回顶部

　　您可以一次标注多个点，标注后，为了同时在地图内显示这些标注，地图会自动调整视野。

//创建一个MmapOptions对象
var mapOptions = new MMapOptions();

//设置地图组件的Id
mapOptions.mapId = "fmptest";

//设置地图的初始Zoom值
mapOptions.zoomLevel = 10;

//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");

//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);

function drawPoints(){
var pointStyle1 = new MStyle();
pointStyle1.lineColor = 0xff0000;
pointStyle1.lineSize = 3;
pointStyle1.fillColor = 0xddaabb;
pointStyle1.fillOpacity = 50;
pointStyle1.labelColor = 0x00ff00;
pointStyle1.textContent = "<font color='#ff0000'>第一个点的文字描述</font><br>详细信息";

var point1 = new MPointOverlay(new MLatLng("KJONOWKMHLL,MRGYNMLHL"), "第一个点", pointStyle1, "2001");

var pointStyle2 = new MStyle();
pointStyle2.lineColor = 0x3300ff;
pointStyle2.lineSize = 2;
pointStyle2.fillColor = 0xddaaff;
pointStyle2.fillOpacity = 60;
pointStyle2.labelColor = 0x553344;
pointStyle2.textContent = "<font color='#ff00aa'>第二个点的文字描述</font><br>详细信息";

var point2 = new MPointOverlay(new MLatLng("KJONOWOILHH,MRGYMXEHHL"), "第二个点", pointStyle2, "2002");

var pointStyle3 = new MStyle();
pointStyle3.lineColor = 0xf0aaf0;
pointStyle3.lineSize = 5;
pointStyle3.fillColor = 0xddaa33;
pointStyle3.fillOpacity = 30;
pointStyle3.labelColor = 0xff0000;
pointStyle3.textContent = "<font color='#aaff00'>第三个点的文字描述</font><br>详细信息";

var point3 = new MPointOverlay(new MLatLng("KJONOWQMHLH,MRGYMVEHHL"), "第三个点", pointStyle3, "2003");

var pointStyle4 = new MStyle();
pointStyle4.lineColor = 0x3366ff;
pointStyle4.lineSize = 4;
pointStyle4.fillColor = 0xddaa99;
pointStyle4.fillOpacity = 80;
pointStyle4.labelColor = 0x00ffaa;
pointStyle4.textContent = "<font color='#0000ff'>第四个点的文字描述</font><br>详细信息";

var point4 = new MPointOverlay(new MLatLng("KJONOWRELHL,MRGYMVMLPH"), "第四个点", pointStyle4, "2004");

var points = new Array();
points.push(point1);
points.push(point2);
points.push(point3);
points.push(point4);

mapObj.drawPoints(points, true);
}

drawPoints();
</script>

　画多折线返回顶部

　　下面这个例子演示了在地图上画多折线的功能。您可以设置多折线的样式

//创建一个MmapOptions对象
var mapOptions = new MMapOptions();

//设置地图组件的Id
mapOptions.mapId = "fmptest";

//设置地图的初始Zoom值
mapOptions.zoomLevel = 15;

//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");

//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);

//画多折线
function drawPolyline(){
polylineStyle = new MStyle();
polylineStyle.lineColor = 0x0000ff;//线的颜色
polylineStyle.lineSize = 5; //线的宽度
polylineStyle.showTip = false; //不显示tip

polyline = new MPolylineOverlay([new MLatLng("LQGUXQPVODHPH", "JINMWQJQLPLDDL"), new MLatLng("LQGWPLQVKHLLL","JINMYKIOIQHLLL"), new MLatLng("LQGUQTJOPHDHL","JINMYPORJLDHH"), new MLatLng("LQGWWMNQMLLHD","JIOMPTORQQHHHL"), new MLatLng("LQGVVNQWHHLD","JIOMQQNONHLHH"), new MLatLng("LQGXVRKULPHLD","JIOMSLHQMRDLLL")],polylineStyle, "1001"); 
mapObj.addOverlay(polyline,true);//true 为自动调整视野

}

</script>
<input type="button" onClick="javascript:drawPolyline();" value="画折线" />
<input type="button" onClick="javascript:mapObj.removePolylineById('1001');" value="删除该折线" />
</body>
</html>

小提示：您可以试着修改多折线的样式参数，比如修改宽度、透明度、颜色，然后运行一下，看看效果如何。

　画矩形返回顶部

　　在实现拉框搜索、拉框选择时都需要用到矩形。下面这个例子演示了如何在地图上画一个矩形。

//创建一个MmapOptions对象
var mapOptions = new MMapOptions();

//设置地图组件的Id
mapOptions.mapId = "fmptest";

//设置地图的初始Zoom值
mapOptions.zoomLevel = 10;

//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");

//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);

//画矩形
function drawRectangle()
{
var rectStyle = new MStyle();
rectStyle.lineSize = 2;
rectStyle.lineColor = 0x00ff00;
rectStyle.fillColor = 0x0000ff;
rectStyle.fillOpacity = 50;
rectStyle.textContent = "这是一个矩形";
rectStyle.labelColor = 0xff0000;

//参数分别为 左上角坐标 和对应和对角线坐标 , 样式 , ID
rect = new MRectOverlay(new MLatLng("qqhrqjgojKHEJ", "oipgkglllgOLIJ"), new MLatLng("qqhrqfhohODMF","oipgkgmgljOLIJ"), rectStyle, "1002");
mapObj.addOverlay(rect);

//添加调整视野代码
mapObj.setCenterByLatLng("qqhrqjgojKHEJ", "oipgkglllgOLIJ");
mapObj.setZoomLevel(15);
}

</script>
<input type="button" onClick="javascript:drawRectangle();" value="画矩形" />
<input type="button" onClick="javascript:mapObj.removeRectById('1002');" value="删矩形" />
</body>
</html>

4. 画公交线路返回顶部

　　在地图上画一条公交换乘的路线，并且有小车演示行驶过程，其中还有一个换乘点。您可能会奇怪公交线路的数据是从哪取得的，请参考公交查询API。

//创建一个MmapOptions对象
var mapOptions = new MMapOptions();

//设置地图组件的Id
mapOptions.mapId = "fmptest";

//设置地图的初始Zoom值
mapOptions.zoomLevel = 10;

//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");

//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);

//注册地图初始化完成事件 地图初始化完执行 mapInited() 方法
mapObj.addEventListener(MMap.EVENT_MAP_INITIALIZED, mapInited);

function mapInited(){
drawBusLineDemo();
}

//画公交线路
function drawBusLineDemo(){

//公交线路的所有X坐标
var arrX = "lksfiiqlhuGMDJ,lksfiipmhmKEHJ,lksfiiolltOIDN,lksfiiqlotKIDN,lksfiivejsOIHF,lksfiivikuGELN,lksfiisjmqOIDN,lksfiiseipOELF,lksfiisngmOELJ,lksfiitgimGMLJ,lksfiiuhiOEHJ,lksfiivmpnGEHJ,lksfijpfgpGILN,lksfijrhnsOMHN,lksfijrfnuGILF,lksfijokpnKILJ,lksfijofhuOMLN,lksfijngisOIHN,lksfijnepKEDF,lksfijnfouOMHJ,lksfijnfprOILJ,lksfijnelmKMHN,lksfiivglmOIHF,lksfiivkmoKIDF,lksfiivhisKILJ,lksfiiumlpGIHN,lksfiiphjGILN,lksfiiphhqGMLN,lksfiiqgmuGIHN,lksfiiqmmpKMDF,lksfiingpoKILJ,lksfihvnprKIHJ,lksfihunouOMDN,lksfihskmnKMLJ,lksfihsjmoOILN,lksfihrmjmKEHN,lksfihrjjoKILF,lksfihrjhtGIDJ,lksfihrekqGEDJ,lksfihqknuKMLN,lksfihpnjuKMHF,lksfigvejoGELN,lksfigsnmqOMHJ,lksfigsmitKMHF,lksfigsfjpKEDF,lksfigrjkrOILJ,lksfigregqOMHF,lksfigpnkpGEHF,lksfigonnqGMLJ,lksfignjjoKIHJ,lksfifvkmpGMHJ,lksfifufnrOEHJ,lksfiftjnpOMHN";

//公交线路的所有X坐标
var arrY = "nskoknoijojKIHF,nskoljrmnqKIHF,nskomipmnqKEDJ,nskonevkgtjGIHJ,nskonmngoojOIDJ,nskoofphmrmKEHJ,nskpfksfkmmOILN,nskphfumgtjKMHF,nskphmpimrmOMLN,nskpjmphpmmOMLJ,nskpklpfltjGIHJ,nskplkrniqKMDJ,nskpllukmrmGMHN,nskpllwmkmmOMLN,nskplnslpmmOMHN,nskplnpjlOMLJ,nskplnumgtjOELF,nskpmnngkmmKIHJ,nskpnkrgoojKIHN,nskpogwnjojOILJ,nskpogwggtjGMLF,nskpokveoojGMLJ,nskpokunmrmGMDN,nskpolwhnqOMLJ,nskponslnqKMHN,nskponslOMLJ,nskponqlpmmKILJ,nskqffnjKIHN,nskqfjqfpmmKELF,nskqflqnkmmGILJ,nskqflqnnqOEDJ,nskqfluhKIHJ,nskqfluhjojKIHN,nskqfluhnqOIHN,nskqfmtfgtjGELF,nskqgfqnhrmKMDN,nskqgnogKIDJ,nskqhiqhpmmOMDN,nskqhmvhiqOMLJ,nskqigrhnqKILN,nskqigsfnqKILF,nskqigrmjojOIHN,nskqigrmmrmGMHJ,nskqikrniqOILN,nskqjhvlKIHF,nskqjmoiiqOILJ,nskqkgpmlOIHN,nskqleoepmmOMLN,nskqljqhpmmGIDN,nskqlmvlhrmKILN,nskqmhqnhrmOMLF,nskqmlqglOMLJ,nskqngtfltjKIDN";

//换成站的坐标
var changeStationLngs = "lksfijnfouOMHJ,lksfijnfprOILJ";
var changeStationLats = "nskpogwnjojOILJ,nskpogwggtjGMLF";

var startStyle = new MStyle();
startStyle.textContent="大兴";

var endStyle = new MStyle();
endStyle.textContent="中关村";

var lineStyle = new MStyle();
lineStyle.lineSize = 3;
lineStyle.lineColor = 0x0000ff;
lineStyle.carSpeed = 5;
var startPoint = new MPointOverlay(new MLatLng("lksfiiqlhuGMDJ,nskoknoijojKIHF"), "起点", startStyle);
var endPoint = new MPointOverlay(new MLatLng("lksfiftjnpOMHN,nskqngtfltjKIDN"), "终点", endStyle);
mapObj.drawBusLine(arrX, arrY, changeStationLngs, changeStationLats, startPoint, endPoint, lineStyle, true); //参数true 为自动调整视野
}
</script>

</body>
</html>

5. 用鼠标画图返回顶部

　　使用MapABC地图API您可以随心所欲的用鼠标在地图上绘制几何图形。下面的例子演示了使用鼠标画点、多折线、多边形、矩形、圆、正多边形等几何图形，也演示了如何删除绘制的图形。

//创建一个MmapOptions对象
var mapOptions = new MMapOptions();

//设置地图组件的Id
mapOptions.mapId = "fmptest";

//设置地图的初始Zoom值
mapOptions.zoomLevel = 10;

//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");

//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);

//注册地图初始化完成事件 地图初始化完执行 mapInited() 方法
mapObj.addEventListener(MMap.EVENT_MAP_INITIALIZED, mapInited);

//注册地图鼠标双击点击事件 之后执行dbclick
mapObj.addEventListener(MMap.EVENT_MAP_DBCLICK, dbclick);

//注册鼠标画多折线后事件 之后执行polylineDrawn
mapObj.addEventListener(MMap.EVENT_POLYLINE_DRAWN, polylineDrawn);

//注册鼠标画矩形后事件 之后执行rectDrawn
mapObj.addEventListener(MMap.EVENT_RECT_DRAWN, rectDrawn);

//注册鼠标画多边形后事件 之后执行polygonDrawn
mapObj.addEventListener(MMap.EVENT_POLYGON_DRAWN, polygonDrawn);

//注册鼠标画圆后事件 之后执行circleDrawn
mapObj.addEventListener(MMap.EVENT_CIRCLE_DRAWN, circleDrawn);

//注册鼠标画正多边形后事件 之后执行regularpolygonDrawn
mapObj.addEventListener(MMap.EVENT_REGULARPOLYGON_DRAWN, regularpolygonDrawn);

function mapInited(event){
alert("地图初始化完成!");

//关闭默认鼠标放大地图操作
mapObj.switchDefaultDBClickProcessor(false);
}

function dbclick(event){
alert("您双击的位置点的地图ID,ZOOM值,坐标为:"+event.args);
//返回坐标为该点的XY 值
}

function polylineDrawn(event){
alert("您画多折线的地图ID,ZOOM值,坐标为:"+event.args);
//返回坐标为多点的XY 值
}

function rectDrawn(event){
alert("您画矩形的地图ID,ZOOM值,坐标为:"+event.args);
/**
当用鼠标在地图上画完一个矩形时触发。
event.type=”onRectDrawn”
event.args=mapId,zoomLevel,point1Lng,point1Lat,point2Lng,point
2Lat,id
args 的值是一个以“,”分隔的字符串，其中：
mapId：地图的Id
zoomLevel：地图当前的zoom 值
point1Lng,point1Lat,point2Lng,point2Lat：表示矩形对角线上的两个顶点。
每对坐标都是经度在前，纬度在后。根据鼠标画矩形时的顺序，这两个点有可能为左上和右
下或者右上和左下。
id：矩形的Id，引擎随机生成的一个guid。
**/
}

function polygonDrawn(event){
alert("您画多边形的地图ID,ZOOM值,坐标为:"+event.args);
/**
event.type=”onPolygonDrawn”
event.args=mapId,zoomLevel,point1Lng,point1Lat,point2Lng,point
2Lat,……,id
args 的值是一个以“,”分隔的字符串，其中：
mapId：地图的Id
zoomLevel：地图当前的zoom 值
33
point1Lng,point1Lat,point2Lng,point2Lat,……：一个坐标序列，表示多边
形的每一个顶点。节点坐标按照经度在前，纬度在后顺序排列。
id：多边形的Id，引擎随机生成的一个guid。
**/
}

function circleDrawn(event){
alert("您画圆的地图ID,ZOOM值,坐标为:"+event.args);
/**
event.type=”onCircleDrawn”
event.args=mapId,zoomLevel,point1Lng,point1Lat,point2Lng,point
2Lat,id
args 的值是一个以“,”分隔的字符串，其中：
mapId：地图的Id
zoomLevel：地图当前的zoom 值
point1Lng,point1Lat,point2Lng,point2Lat：两对坐标，第一对是圆心坐标，
第二对是圆的外接矩形的一个顶点。每对坐标都是经度在前，纬度在后。根据鼠标画圆形时
的顺序，第二对坐标可能为外接矩形的任一个顶点。
id：圆形的Id，引擎随机生成的一个guid。
**/
}

function regularpolygonDrawn(event){
alert("您画正多边形的地图ID,ZOOM值,坐标为:"+event.args);
/**
event.type=”onRegularPolygonDrawn”
event.args=mapId,zoomLevel,point1Lng,point1Lat,point2Lng,point
2Lat,……,id
args 的值是一个以“,”分隔的字符串，其中：
mapId：地图的Id
zoomLevel：地图当前的zoom 值
point1Lng,point1Lat,point2Lng,point2Lat：两对坐标，第一对是正多边形
的圆心坐标，第二对是画正多边形时鼠标拖动结束的位置，即正多边形的一个顶点。每对坐
标都是经度在前，纬度在后。
id：正多边形的Id，引擎随机生成的一个guid。
**/
}

//鼠标画折线
function beginDrawPolylineOnMap(){
mapObj.quitMouseDraw();
var polylineStyle = new MStyle();
polylineStyle.lineColor = 0xff0000;
polylineStyle.lineSize = 5;
mapObj.beginDrawPolylineOnMap(polylineStyle);
}

//鼠标画矩形
function beginDrawRectOnMap(){
mapObj.quitMouseDraw();
var rectStyle = new MStyle();
rectStyle.lineColor = 0x00ff00;
rectStyle.lineSize = 3;
rectStyle.fillOpacity = 30;
rectStyle.fillColor = 0x009999;
mapObj.beginDrawRectOnMap(rectStyle);
}

//鼠标画多边形
function beginDrawPolygonOnMap(){
mapObj.quitMouseDraw();
var polygonStyle = new MStyle();
polygonStyle.lineColor = 0xff0000;
polygonStyle.lineSize = 5;
polygonStyle.fillOpacity = 50;
polygonStyle.fillColor = 0x999900;
mapObj.beginDrawPolygonOnMap(polygonStyle);
}

//鼠标画圆
function beginDrawCircleOnMap(){
mapObj.quitMouseDraw();
var circleStyle = new MStyle();
circleStyle.lineColor = 0xff00ff;
circleStyle.lineSize = 4;
circleStyle.fillOpacity = 60;
circleStyle.fillColor = 0xff9900;
mapObj.beginDrawCircleOnMap(circleStyle);
}

//鼠标画正多边形
function beginDrawRegularPolygonOnMap(){
mapObj.quitMouseDraw();
var regularPolygonStyle = new MStyle();
regularPolygonStyle.lineColor = 0x6600ff;
regularPolygonStyle.lineSize = 6;
regularPolygonStyle.sideCount = 6;
regularPolygonStyle.fillOpacity = 40;
regularPolygonStyle.fillColor = 0x009900;
mapObj.beginDrawRegularPolygonOnMap(regularPolygonStyle);
}
</script>
<input type="button" onClick="javascript:beginDrawPolylineOnMap();" value="开始画多折线" /> <input type="button" onClick="javascript:beginDrawRectOnMap();" value="开始画矩形" /> <input type="button" onClick="javascript:beginDrawPolygonOnMap();" value="开始画多边形" /> 
<input type="button" onClick="javascript:beginDrawCircleOnMap();" value="开始画圆" /> <input type="button" onClick="javascript:beginDrawRegularPolygonOnMap();" value="开始画正多边形" /> <input type="button" onClick="javascript:mapObj.quitMouseDraw();" value="退出绘图" /><br><br>

6. 事件处理返回顶部

　　事件是面向对象编程的强大工具，可以提高应用的交互性。MapABC地图API提供了大量的事件，让您轻松开发更多互动应用。
　　鼠标单击事件是最常用的事件，注册一个单击事件的事件处理函数，当鼠标在地图上单击时，会把地图的id，当前的缩放级别，鼠标点击处的坐标返回到事件处理函数里。

//创建一个MmapOptions对象
var mapOptions = new MMapOptions();

//设置地图组件的Id
mapOptions.mapId = "fmptest";

//设置地图的初始Zoom值
mapOptions.zoomLevel = 10;

//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");

//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);

//注册地图初始化完成事件 地图初始化完执行 mapInited() 方法
mapObj.addEventListener(MMap.EVENT_MAP_INITIALIZED, mapInited);

//注册鼠标画点后事件
mapObj.addEventListener(MMap.EVENT_POINT_DRAWN, pointDrawn);

function mapInited(){
alert("初始化完成,请在地图上加点!");
beginDrawPointOnMap();
}

function beginDrawPointOnMap()
{
var pointStyle = new MStyle();
pointStyle.lineColor = 0x445599;
pointStyle.lineSize = 3;
pointStyle.fillColor = 0xaa9900;
pointStyle.fillOpacity = 30;
pointStyle.label = "一个点";
pointStyle.textContent = "鼠标画点";
mapObj.beginDrawPointOnMap(pointStyle);
}

function pointDrawn(event)
{
alert(event.args);
}
</script>

</body>
</html>

地图API提供了一些缺省的事件处理，如双击地图会执行放大操作。下面的代码演示了如何禁止缺省的事件操作。

7. 右键菜单返回顶部

　　想实现更多的定制化？MapABC地图API让您随意定义右键菜单。您可以增加自己的右键菜单选项。点击右键菜单，选择菜单项后，地图引擎会抛出右键菜单点击事件，并传出当前点击的参数。您可以在右键菜单事件处理函数里添加代码，实现菜单项对应的功能。

//创建一个MmapOptions对象
var mapOptions = new MMapOptions();

//设置地图组件的Id
mapOptions.mapId = "fmptest";

//设置地图的初始Zoom值
mapOptions.zoomLevel = 10;

//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");

//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);

//注册右键菜单 回调方法
mapObj.addEventListener(MMap.EVENT_POPUP_MENU_CLICK,tipClosed);

function tipClosed(event){
alert(event.args);
}
</script>
<input type="button" onClick="javascript:mapObj.addPopupMenuItem('增加第一个右键菜单','menu1');" value="增加第一个右键菜单" /> 
<input type="button" onClick="javascript:mapObj.addPopupMenuItem('增加第二个右键菜单','menu2');" value="增加第二个右键菜单" />

8. 地图编辑功能返回顶部

　　想做一个像MapABC炫地图（diy.mapabc.com）那样的应用吗？MapABC地图API提供了地图编辑接口，您可以在地图上标注，或者编辑标注的内容。不仅点可以用来标注，线和面都可以作为标注的工具。

//创建一个MmapOptions对象
var mapOptions = new MMapOptions();

//设置地图组件的Id
mapOptions.mapId = "fmptest";

//设置地图的初始Zoom值
mapOptions.zoomLevel = 10;

//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");

//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);

//注册导出地图数据事件 后执行 onexportMapData 方法
mapObj.addEventListener(MMap.EVENT_EXPORT_MAP_DATA, onexportMapData);

function editMode(){
//设置地图为编辑模式
mapObj.setMapMode(MMapMode.EDIT);
}

//编辑模式下 添加点
function createPoint(){
var defaultPointStyle = new MStyle();
defaultPointStyle.canBeTop = true;
mapObj.addGeometry(MGeometry.TYPE_POINT, defaultPointStyle);
}

//编辑模式添加折线
function createPolyline(){
//定义缺省的多折线样式
var polylineStyle = new MStyle();
polylineStyle.lineColor = 0x00ff00;
polylineStyle.lineSize = 5;
polylineStyle.lineOpacity = 60;
polylineStyle.showTip = true;

mapObj.addGeometry(MGeometry.TYPE_POLYLINE, polylineStyle);
}

//导出地图数据事件处理函数
function onexportMapData(event){
alert(event.args);
/**
event.type=”onExportMapData”
event.args=mapId,jsonString
args 的值是一个以“,”分隔的字符串，其中：
mapId：地图的Id
jsonString：整个地图的几何对象的JSON 字符串。
**/
}

function createPolygon(){
//定义缺省的多边形样式
var polygonStyle = new MStyle();
polygonStyle.lineColor = 0x00ff99;
polygonStyle.lineSize = 5;
polygonStyle.lineOpacity = 60;
polygonStyle.fillOpacity = 50;
polygonStyle.fillColor = 0x999900;

mapObj.addGeometry(MGeometry.TYPE_POLYGON, polygonStyle);
}
　
//导出点的数据方法
function exportMapData(){
mapObj.exportMapData();
}

</script>
操作方法: 先在 地图上左键标点 并填入标题 内容点击确定. 然后点击导出数据<br /><br />

</body>
</html>

　数据导入导出返回顶部

　　在地图上编辑的内容可以导入、导出，因为您可以把编辑好的内容导出后保存起来，使用时再导入到地图中即可重现原有的内容。

//创建一个MmapOptions对象
var mapOptions = new MMapOptions();

//设置地图组件的Id
mapOptions.mapId = "fmptest";

//设置地图的初始Zoom值
mapOptions.zoomLevel = 10;

//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");

//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);

function editMode(){
//设置地图为编辑模式
mapObj.setMapMode(MMapMode.EDIT);
}

/**
说明：
把使用exportMapData 方法导出的点、线、面数据导入到当前地图。导入的数据是
JSON格式字符串，因此使用此功能时需要在页面里添加一些JSON工具，如prototype.js
（1.5.1 以后的版本）。
注意：不要使用json.js，这个脚本与FMP 有冲突。
参数：
data：
说明：导入的数据，是一个JSON 字符串。
类型：String
**/
function importMapData(){

var json = '[{"coordX":"JIOMSOHPOTLHLL","coordY":"LQGXXQMVMHLLL","contents":"<TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\">晨报讯(记者 杨莲洁) 前天，徐静蕾做客MapABC图盟科技，和北京电影学院93级表演系的同班同学杨飞(现任MapABC业务拓展部经理)聚会。毕业十年再聚首，老同学一起回忆过去，想起当年同学的旧事，徐静蕾不禁泪如雨下，一旁的同学刘孜也陪同伤感落泪。</FONT></P></TEXTFORMAT>","icoUrl":"http://api.mapabc.com/fmp/test/components/point/DynamicPoint/redbubble.swf","imageArray":["http://res.mapabc.com/mymaps/img/2007/9/28/img200792882044185.jpg"],"notStyleContent":"晨报讯(记者 杨莲洁) 前天，徐静蕾做客MapABC图盟科技，和北京电影学院93级表演系的同班同学杨飞(现任MapABC业务拓展部经理)聚会。毕业十年再聚首，老同学一起回忆过去，想起当年同学的旧事，徐静蕾不禁泪如雨下，一旁的同学刘孜也陪同伤感落泪。","serialid":"4c159459-7251-56ae-c1c3-4C033095c979","titles":"徐静蕾","setTop":true,"gType":"pp_mc"},{"coordX":"JIOMRPNOQLHHH","coordY":"LQGXYQMWDHHH","contents":"<TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\">徐静蕾做客《快乐大本营》</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\">　　前日，徐静蕾在长沙参加某公司在《快乐大本营》录制的产品发布会，当主持人下台拿道具时，便不见踪影。并取消了弹钢琴和简短访谈节目，让“蕾丝”们十分失望。更有观众表示，老徐下台后好像在化妆间里“吞云吐雾”。 </FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\">　　前晚的《快乐大本营》现场挂着好几幅老徐代言的广告宣传画。徐静蕾身穿白色无袖V领衣、黑色宽大裙裤、白色平底鞋清爽出场。随后，当老徐在观看自己的一段广告工作花絮时，眉头一紧、嘴巴一抿、脸蛋一垮，严肃的表情让观众们整齐地发出惊叹声。可能是意识到自己“职业病”犯了，老徐展开笑脸冲着观众乐呵呵地笑起来。 </FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\"></FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\">　　从现场工作人员手中的节目表来看，老徐在节目开始不久将有钢琴表演，节目尾声还有段与谢娜合作的简短博客访问。老徐在参与第一个节目时，何炅、谢娜等主持人原本邀请老徐参加一个舞龙游戏，就在主持人下台拿道具时，老徐不打声招呼就离开舞台，台上台下一片愕然。但节目录制进行两小时后，仍不见钢琴的影子。 </FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\"></FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\">　　对于是否有钢琴表演，老徐的随行人员表示，钢琴节目其实是个假定节目，“因为事先双方并未就此事进行沟通，所以我们不能表演这个节目，至于博客访谈，因为在第一个节目中就已经很好讲解了她的‘博客事业’，我们觉得有点重复，就取消了。” </FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\"></FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\">　　待老徐的随行工作人员进入化妆间，现场一位“蕾丝”一脸惊讶地告诉身边的朋友，“刚才我从化妆间地面上的倒影看到老徐在抽烟！并且好像不太高兴的样子。当时化妆间没有工作人员守着，通过地面反光看到化妆间里有烟雾，并且老徐似乎是在做抽烟的动作，“反正里面烟雾缭绕，我从倒影里看到她老是把手放在嘴边，而且可以很清楚地看见她旁边的一个女的在抽烟。”老徐是否也在“吞云吐雾”？记者想看个究竟，但守在门口的工作人员以艺人在休息为由不准记者入内。</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\"></FONT></P></TEXTFORMAT>","icoUrl":"http://api.mapabc.com/fmp/test/components/point/DynamicPoint/1.png","imageArray":["http://image2.sina.com.cn/ent/s/m/p/2006-06-12/U1344P28T3D1119777F326DT20060612153309.jpg"],"notStyleContent":"徐静蕾做客《快乐大本营》\\r　　前日，徐静蕾在长沙参加某公司在《快乐大本营》录制的产品发布会，当主持人下台拿道具时，便不见踪影。并取消了弹钢琴和简短访谈节目，让“蕾丝”们十分失望。更有观众表示，老徐下台后好像在化妆间里“吞云吐雾”。 \\r　　前晚的《快乐大本营》现场挂着好几幅老徐代言的广告宣传画。徐静蕾身穿白色无袖V领衣、黑色宽大裙裤、白色平底鞋清爽出场。随后，当老徐在观看自己的一段广告工作花絮时，眉头一紧、嘴巴一抿、脸蛋一垮，严肃的表情让观众们整齐地发出惊叹声。可能是意识到自己“职业病”犯了，老徐展开笑脸冲着观众乐呵呵地笑起来。 \\r\\r　　从现场工作人员手中的节目表来看，老徐在节目开始不久将有钢琴表演，节目尾声还有段与谢娜合作的简短博客访问。老徐在参与第一个节目时，何炅、谢娜等主持人原本邀请老徐参加一个舞龙游戏，就在主持人下台拿道具时，老徐不打声招呼就离开舞台，台上台下一片愕然。但节目录制进行两小时后，仍不见钢琴的影子。 \\r\\r　　对于是否有钢琴表演，老徐的随行人员表示，钢琴节目其实是个假定节目，“因为事先双方并未就此事进行沟通，所以我们不能表演这个节目，至于博客访谈，因为在第一个节目中就已经很好讲解了她的‘博客事业’，我们觉得有点重复，就取消了。” \\r\\r　　待老徐的随行工作人员进入化妆间，现场一位“蕾丝”一脸惊讶地告诉身边的朋友，“刚才我从化妆间地面上的倒影看到老徐在抽烟！并且好像不太高兴的样子。当时化妆间没有工作人员守着，通过地面反光看到化妆间里有烟雾，并且老徐似乎是在做抽烟的动作，“反正里面烟雾缭绕，我从倒影里看到她老是把手放在嘴边，而且可以很清楚地看见她旁边的一个女的在抽烟。”老徐是否也在“吞云吐雾”？记者想看个究竟，但守在门口的工作人员以艺人在休息为由不准记者入内。\\r\\r","serialid":"bc91c69f-83a3-e3c6-36da-4C058208fad2","titles":"老徐的博客","setTop":true,"gType":"pp_mc"},{"coordX":"JIOMRQKPJTHHLH","coordY":"MHGORQMTPHLLH","contents":"<TEXTFORMAT LEADING=\\"2\\"><P ALIGN=\\"LEFT\\"><FONT FACE=\\"宋体\\" SIZE=\\"12\\" COLOR=\\"#000000\\" LETTERSPACING=\\"0\\" KERNING=\\"0\\">梦想照进现实</FONT></P></TEXTFORMAT>","icoUrl":"http://api.mapabc.com/fmp/test/components/point/DynamicPoint/1.png","imageArray":["start","http://res.mapabc.com/mymaps/img/2007/9/28/img200792882413883.jpg","http://res.mapabc.com/mymaps/img/2007/9/28/img200792882421287.jpg","http://res.mapabc.com/mymaps/img/2007/9/28/img200792882429350.jpg","http://res.mapabc.com/mymaps/img/2007/9/28/img20079288244292.jpg","end"],"notStyleContent":"梦想照进现实","serialid":"bd0131ce-42f9-46d3-2f64-4C066EDAb216","titles":"老徐写真","setTop":true,"gType":"pp_mc"}]'; 
mapObj.importMapData(json);
}

//导入线数据
function importMapDataline(){
var json ='[{"lineColor":65280,"line_size":5,"lineOpacity":60,"serialid":"2e844e6a-7be3-fb2c-1cd6-13A3230C5520","coordX":["JINMRNQWLTHDLD","JINMSNHRLTHHHL","JINMWPKRJMDLHH","JINMYOMTPNLDLH","JIOMRPKPQUHPLP","JIOMVNOVJMPHLH","JIOMWLIWOUDHHD","JIOMWQQTMSLHHL"],"coordY":["MHGVVTLLLH","MHGSUQKPPLHDH","MHGWSNMQLHLL","MHGSXTOSPHHHL","MHGXWSPQPDDLP","MIGOURMVMDDDH","MHGWYLNWJHDPH","MIGOULKUJHHHL"],"titles":"线2","imageContentArray":[],"contents":"","notStyleContent":"","imageArray":[],"maxdisscroll":0,"lineDashStyle":false,"setTop":true,"showTip":true,"gType":"section_mc"}]';
mapObj.importMapData(json);

}

//导入面数据
function importMapDatage(){
var json = '[{"lineColor":65433,"line_size":5,"lineOpacity":60,"serialid":"9fa28a44-e4b2-ce56-1e96-13A469A59b2d","fillColor":10066176,"fillOpacity":50,"coordX":["JIOMQNNQNNHLHP","JIOMSLHUOHLLL","JIOMSMIUMRLLHD","JIOMRRKTQMLLHP"],"coordY":["LQGWPRNVRLDHH","LQGTVQOQPDHLH","LQGWTTPUMLLDP","LQGWTTPUMLLLH"],"titles":"面1","imageContentArray":[],"contents":"","notStyleContent":"","imageArray":[],"maxdisscroll":0,"lineDashStyle":false,"setTop":true,"showTip":true,"gType":"polygon_mc"}]';

mapObj.importMapData(json);

}

</script>
<input type="button" onClick="javascript:editMode();" value="编辑模式" /> 
<input type="button" onClick="javascript:importMapData();" value="导入点" /> 
<input type="button" onClick="javascript:importMapDataline();" value="导入线" /> 
<input type="button" onClick="javascript:importMapDatage();" value="导入面" /> 
</body>
</html>

9. 搜索功能

　关键字查询返回顶部

　　地图最常用的用法就是查询了，下面这个例子使用了MapABC 地图API的搜索功能，根据输入的关键字查询结果，并把查询的结果标注到地图上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<script src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3" type="text/javascript"></script>
<script src="http://api.mapabc.com/api/v1.0/js/ajaxsis.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3" type="text/javascript"></script>
<script type="text/javaScript" language="JavaScript" src="http://www.mapabc.com/html/js/ajax/prototype.js"></script>
<title>关键字查询</title>
<style type="text/css">
body{ font-size:12px; margin:0; padding:0;}
#mapObj {
height: 300px;
width: 500px;
}
.style2 {font-size: small; }
.style3 {font-size: small;color: #FF0000}
</style>
<script language="JavaScript">
<!--关键字查询代码开始
var point = null;
function searchByKeyword(){
	mapObj.removeAllOverlays();//在每次执行新查询时，先删除已经查出的POI点
	//以下是从文本框中得到查询参数
	var citycode = document.form1.citycode.value;
	var keyword = document.form1.keyword.value
	var searchType = document.form1.searchType.value
	var number = document.form1.number.value
	var batch = document.form1.batch.value
	if(citycode == ""){
		alert("请填写城市区号，此处不能为空!");
		return false;
	}
	if(keyword == ""){
		alert("请填写查询关键子，此处不能为空!");
		return false;
	}

var sis = new MSISSearch();//自定义sis变量调用查询方法
	var searchpointpara = new MSearchPointPara();//自定义searchpointpara变量调用设置参数方法
	//设置自定义函数名称，sis.setSISCallbackFunction(自定义函数名称)，此处自定义函数名称要与下面自定义函数名称一致
	sis.setSISCallbackFunction(keywordCallBack); 
	//开始把得到的参数传入set方法中
	searchpointpara.setCitycode(citycode);
	searchpointpara.setKeyword(keyword);
	searchpointpara.setSearchType(searchType);
	searchpointpara.setNumber(number);
	searchpointpara.setBatch(batch);
	sis.searchByKeyword(searchpointpara);
}

/**
 //data参数表示服务器端给客户端返回的JSON对象
 //通过循环JSON对象里的poilist将值遍历出来，在此JSON对象里的数组为poilist
 //如果想了解JSON对象请登陆http://org.json.com英文网站进行查询
**/
function keywordCallBack(data)
{
	//在html里加入表格
	var html = "<table width='100%' border='0'>";
	//判断返回值是否为空
	if (data.count != 0) {
		for (var i = 0; i < data.poilist.length; i++) {
			//用data.poilist[i].属性名称 得到值
			var pid = data.poilist[i].pguid;
			var data_citycode = data.poilist[i].citycode;
			var x = data.poilist[i].x;
			var y = data.poilist[i].y;
			var pointStyle = new MStyle();//调用MStyle设置TIP窗口样式
		    pointStyle.lineColor = 0xFFFFFF;//lineColor：线条颜色，RGB颜色格式
			pointStyle.lineSize = 2;//lineSize：线条的宽度。单位是像素
			pointStyle.fillColor = 0x4b8bd9;//fillColor：填充颜色，RGB颜色格式
			pointStyle.fillOpacity = 80;//fillOpacity：填充的不透明度
			pointStyle.labelColor = 0xFFFFFF;//labelColor：tips的label文字颜色，RGB颜色格式
			pointStyle.leading = 2;//leading：文字行距
		    var type = data.poilist[i].type;
		    if (type == "" || type == "undefined" || type == null) {
		    	type = "暂无";
		    }
		    var address = data.poilist[i].address;
		    if (address == "" || address == "undefined" || address == null) {
		    	address = "暂无";
		    }
		    var tel = data.poilist[i].tel;
		    if (tel == "" || tel == "undefined" || tel == null) {
		    	tel = "暂无";
		    }	    
		    var sContent = "<font color='#ffffff'><b>"+data.poilist[i].name+"</b></font><br>";
		    if (!type == "" && type != null) {
		   		sContent += "<font color='#ffffff'>类型:"+type+"</font><br/>";
		   	}
		   	if (!address == "" && address != null) {
				sContent += "<font color='#ffffff'>地址:"+address+"</font><br/>";
			}
			if (!tel == "" && tel != null) {
				sContent += "<font color='#ffffff'>电话:"+tel+"</font><br/>";
			}
			pointStyle.textContent = sContent;//textContent：tip窗口的文本内容
			point = new MPointOverlay(new MLatLng(y,x), i+1, pointStyle, i+1);//MPointOverlay：在地图上显示为一个有位置的点，有自己的样式和tip，能够接收事件。
			mapObj.addOverlay(point, true);	
			html += "<tr><td colspan='2' onclick=\"mapObj.setCenterByLatLng('"+data.poilist[i].y+"','"+data.poilist[i].x+"');mapObj.openTipById('"+(i+1)+"')\"><div align='left' class='style3'>"+(i+1)+"  "+data.poilist[i].name+"</div></td></tr><tr><td><div align='right' class='style2'>类型：</div></td><td class='style2'>"+type+"</td></tr><tr><td><div align='right' class='style2'>地址：</div></td><td class='style2'>"+address+"</td></tr><tr><td><div align='right' class='style2'>电话：</div></td><td class='style2'>"+tel+"</td></tr>";
		}
	} else {
		alert("对不起！此城市没有您要查找的关键字");
	}
	html += "</table>";
	$('result').innerHTML= html;
}
//关键字查询代码结束-->
</script>
</head>
<body>
<form name="form1" method="post" action="">
  <table width="310" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f8f8f8" style="border:1px solid #e1e1e1; margin-top:20px;" >
    <tr>
      <td width="310" height="239" valign="top">
	  <table width="100%" border="0">
        <tr>
          <td height="50" colspan="2"><div align="center"><strong> 关键字查询</strong></div></td>
        </tr>
        <tr>
          <td width="42%"><div align="right">城市代码：</div></td>
          <td width="58%"><select name="citycode" id="citycode">
            <option value="010" selected="selected">北京市</option>
            <option value="021">上海市</option>
            <option value="022">天津市</option>
            <option value="023">重庆市</option>
          </select></td>
        </tr>
        <tr>
          <td><div align="right">关键字：</div></td>
          <td><input name="keyword" type="text" id="keyword" value="中国银行" /></td>
        </tr>
        <tr>
          <td><div align="right">关键字类型：</div></td>
          <td><input name="searchType" type="text" id="searchType" value="银行" /></td>
        </tr>
        <tr>
          <td><div align="right">返回数据数量：</div></td>
          <td><input name="number" type="text" id="number" value="10" /></td>
        </tr>
        <tr>
          <td><div align="right">批量显示数量：</div></td>
          <td><input name="batch" type="text" id="batch" value="1" /></td>
        </tr>
        <tr>
          <td><div align="right"></div></td>
          <td><input type="button" name="Submit" value="提交"  onclick="searchByKeyword()" /></td>
        </tr>
      </table>
      </td>
    </tr>
  </table>
</form>
<table width="926" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="420" height="300">
	<div style="width:420px; height:300px; overflow-y:auto;">
		<div id="result_start_name"></div>
		<div id="result_end_name"></div>
		<div id="result"></div>
	</div>
	</td>
    <td width="500" valign="top"><div align="right" id="mapObj" class="view"></div>
</td>
  </tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
//////////flash引擎///////////////
var city_center_index="fjtekqrposNKGE,hrlphplnJOOE";
//创建地图对象
var mapOptions = new MMapOptions();
mapOptions.mapId = "fmptest";
mapOptions.zoomLevel = 10;
mapOptions.center = new MLatLng(city_center_index);
//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);
function mapInited(event){
	mapObj.showNavigator(true);
}
mapObj.addEventListener(MMap.EVENT_MAP_INITIALIZED, mapInited);
//////////flash引擎 end////////////
</SCRIPT>
</body>
</html>

　中心点查询返回顶部

　　中心点查询可以让您实现如“查找在故宫周围1公里范围内所有的餐厅”这样的功能。下面这个例子需要输入两个关键字，一个关键字用于定位中心点，另一个关键字用于在中心点附近查询。

/**
 //data参数表示服务器端给客户端返回的JSON对象
 //通过循环JSON对象里的poilist将值遍历出来，在此JSON对象里的数组为poilist
 //如果想了解JSON对象请登陆http://org.json.com英文网站进行查询
**/
function localkeywordCallBack(data)
{
	//在html里加入表格
	var html = "<table width='100%' border='0'>";
	//判断返回值是否为空
	if (data.count != 0) {
		for (var i = 0; i < data.poilist.length; i++) {
			//用data.poilist[i].属性名称 得到值
			var x = data.poilist[i].x;
			var y = data.poilist[i].y;
			var pointStyle = new MStyle();//调用MStyle设置TIP窗口样式
			pointStyle.lineColor = 0xFFFFFF;//lineColor：线条颜色，RGB颜色格式
			pointStyle.lineSize = 2;//lineSize：线条的宽度。单位是像素
			pointStyle.fillColor = 0x4b8bd9;//fillColor：填充颜色，RGB颜色格式
			pointStyle.fillOpacity = 80;//fillOpacity：填充的不透明度
			pointStyle.labelColor = 0xFFFFFF;//labelColor：tips的label文字颜色，RGB颜色格式
			pointStyle.leading = 2;//leading：文字行距
			var type = data.poilist[i].type;
			if (type == "" || type == "undefined" || type == null) {
				type = "暂无";
			}
			var address = data.poilist[i].address;
			if (address == "" || address == "undefined" || address == null) {
				address = "暂无";
			}
			var tel = data.poilist[i].tel;
			if (tel == "" || tel == "undefined" || tel == null) {
				tel = "暂无";
			}
			var sContent = "<font color='#ffffff'><b>"+data.poilist[i].name+"</b></font><br>";
			if (!type == "" && type != null) {
				sContent += "<font color='#ffffff'>类型:"+type+"</font><br/>";
			}
			if (!address == "" && address != null) {
				sContent += "<font color='#ffffff'>地址:"+address+"</font><br/>";
			}
			if (!tel == "" && !tel == null) {
				sContent += "<font color='#ffffff'>电话:"+tel+"</font><br/>";
			}
			pointStyle.textContent = sContent;//textContent：tip窗口的文本内容
			point = new MPointOverlay(new MLatLng(y,x), i+1, pointStyle, i+1);//MPointOverlay：在地图上显示为一个有位置的点，有自己的样式和tip，能够接收事件。
			mapObj.addOverlay(point, true);	
			html += "<tr><td colspan='2' onclick=\"mapObj.setCenterByLatLng('"+y+"','"+x+"');mapObj.openTipById('"+(i+1)+"')\"><div align='left' class='style3'>"+(i+1)+"  "+data.poilist[i].name+"</div></td></tr><tr><td><div align='right' class='style2'>类型：</div></td><td class='style2'>"+type+"</td></tr><tr><td><div align='right' class='style2'>地址：</div></td><td class='style2'>"+address+"</td></tr><tr><td><div align='right' class='style2'>电话：</div></td><td class='style2'>"+tel+"</td></tr>";
		}
	} else {
		alert("对不起！此城市没有您要查找的关键字");
	}
	html += "</table>";
	$('result').innerHTML= html;
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
  <div>
    <table width="27%" border="0" align="center" bgcolor="#f8f8f8" style="border:1px solid #e1e1e1; margin-top:20px;">
      <tr>
        <td width="44%"><div align="right">城市代码：</div></td>
        <td width="56%"><select name="citycode" id="citycode">
            <option value="010" selected="selected">北京市</option>
            <option value="021">上海市</option>
            <option value="022">天津市</option>
            <option value="023">重庆市</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><div align="right">中心点关键字：</div></td>
        <td><input name="centerKeyword" type="text" id="centerKeyword" value="银谷大厦"></td>
      </tr>
      <tr>
        <td><div align="right">关键字：</div></td>
        <td><input name="keyword" type="text" id="keyword" value="中国银行"></td>
      </tr>
      <tr>
        <td><div align="right">关键字类型：</div></td>
        <td><input name="searchType" type="text" id="searchType" value="银行"></td>
      </tr>
      <tr>
        <td><div align="right">查询范围：</div></td>
        <td><input name="range" type="text" id="range" value="3000"></td>
      </tr>
      <tr>
        <td><div align="right">返回数据数量：</div></td>
        <td><input name="number" type="text" id="number" value="10"></td>
      </tr>
      <tr>
        <td><div align="right">批量显示数量：</div></td>
        <td><input name="batch" type="text" id="batch" value="1"></td>
      </tr>
      <tr>
        <td><div align="right"></div></td>
        <td><input type="button" name="Submit" value="提交"  onClick="localSearchByKeyword()"></td>
      </tr>
    </table>
  </div>
</form>

<table width="926" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="420" height="300"><div style="width:420px; height:300px; overflow-y:auto;">
        <div id="result"></div>
    </div></td>
    <td width="500" valign="top"><div id="mapObj" class="view" style="width:500px;height:300px"></div></td>
</table>
<SCRIPT LANGUAGE="JavaScript">
//初始化FLASH引擎
var city_center_index="fjtekqrposNKGE,hrlphplnJOOE";
  //设置地图初始化参数对象
  var mapOptions = new MMapOptions();
  mapOptions.mapId = "fmptest";
  mapOptions.zoomLevel = 10;
  mapOptions.center = new MLatLng(city_center_index);
  
  
  //创建地图对象
  var mapObj = new MMap("mapObj", mapOptions);
  mapObj.showNavigator(true);
</SCRIPT>
</body>
</html>

　经纬度查询返回顶部

　　这是中心点查询功能的另一种形式，即您已经获得了中心点的经纬度坐标，然后根据关键字查询这个中心点周边的POI。如何获得经纬度坐标？方法有很多，想想MapABC地图API的鼠标单击事件……

/**
 //data参数表示服务器端给客户端返回的JSON对象
 //通过循环JSON对象里的poilist将值遍历出来，在此JSON对象里的数组为poilist
 //如果想了解JSON对象请登陆http://org.json.com英文网站进行查询
**/
function localsearchXYCallBack(data)
{
	//在html里加入表格
	var html = "<table width='100%' border='0'>";
	//判断返回值是否为空
	if (data.count != 0) {
		for (var i = 0; i < data.poilist.length; i++) {
			//用data.poilist[i].属性名称 得到值
			var x = data.poilist[i].x;
			var y = data.poilist[i].y;
			var pointStyle = new MStyle();//调用MStyle设置TIP窗口样式
		    pointStyle.lineColor = 0xFFFFFF;//lineColor：线条颜色，RGB颜色格式
			pointStyle.lineSize = 2;//lineSize：线条的宽度。单位是像素
			pointStyle.fillColor = 0x4b8bd9;//fillColor：填充颜色，RGB颜色格式
			pointStyle.fillOpacity = 80;//fillOpacity：填充的不透明度
			pointStyle.labelColor = 0xFFFFFF;//labelColor：tips的label文字颜色，RGB颜色格式
			pointStyle.leading = 2;//leading：文字行距
		    var tel = data.poilist[i].tel;
			if (tel == "" || tel == "undefined" || tel == null) {
				tel = "暂无";
			}
			var address = data.poilist[i].address;
			if (address == "" || address == "undefined" || address == null) {
				address = "暂无";
			}
		    var sContent = "<font color='#ffffff'><b>"+data.poilist[i].name+"</b></font><br>";
		   	if (!address == "" && address != null) {
				sContent += "<font color='#ffffff'>地址:"+address+"</font><br/>";
			}
			if (!tel == "" && !tel == null) {
				sContent += "<font color='#ffffff'>电话:"+tel+"</font><br/>";
			}
			pointStyle.textContent = sContent;//textContent：tip窗口的文本内容
			point = new MPointOverlay(new MLatLng(y,x), i+1, pointStyle, i+1);//MPointOverlay：在地图上显示为一个有位置的点，有自己的样式和tip，能够接收事件。
			mapObj.addOverlay(point, true);	
			html += "<tr><td colspan='2' onclick=\"mapObj.setCenterByLatLng('"+y+"','"+x+"');mapObj.openTipById('"+(i+1)+"')\"><div align='left' class='style3'>"+(i+1)+"  "+data.poilist[i].name+"</div></td></tr><tr><td><div align='right' class='style2'>地址：</div></td><td class='style2'>"+address+"</td></tr><tr><td><div align='right' class='style2'>电话：</div></td><td class='style2'>"+tel+"</td></tr>";
		}
	} else {
		alert("对不起！此城市没有您要查找的关键字");
	}
	html += "</table>";
	$('result').innerHTML= html;
}
</script>
</head>

<body>
  <form name="form1" method="post" action="">
    <div>
      <table width="34%" border="0" align="center"  bgcolor="#f8f8f8" style="border:1px solid #e1e1e1; margin-top:20px;">
        <tr>
          <td width="44%"><div align="right">城市代码：</div></td>
          <td width="56%"><select name="citycode" id="citycode">
            <option value="010" selected="selected">北京市</option>
            <option value="021">上海市</option>
            <option value="022">天津市</option>
            <option value="023">重庆市</option>
          </select>
          </td>
        </tr>
        <tr>
          <td><div align="right">X经度：</div></td>
          <td><input name="cenX" type="text" id="cenX" value="JQNNSRMVUOIFHM"></td>
        </tr>
        <tr>
          <td><div align="right">Y纬度：</div></td>
          <td><input name="cenY" type="text" id="cenY" value="LYFYVVPRMKLMNHM"></td>
        </tr>
        <tr>
          <td><div align="right">关键字：</div></td>
          <td><input name="keyword" type="text" id="keyword" value="中国银行"></td>
        </tr>
        <tr>
          <td><div align="right">关键字类型：</div></td>
          <td><input name="searchType" type="text" id="searchType" value="银行"></td>
        </tr>
        <tr>
          <td><div align="right">查询范围：</div></td>
          <td><input name="range" type="text" id="range" value="3000"></td>
        </tr>
        <tr>
          <td><div align="right">返回数据数量：</div></td>
          <td><input name="number" type="text" id="number" value="10"></td>
        </tr>
        <tr>
          <td><div align="right">批量显示数量：</div></td>
          <td><input name="batch" type="text" id="batch" value="1"></td>
        </tr>
        <tr>
          <td><div align="right"></div></td>
          <td><input type="button" name="Submit" value="提交"  onClick="localsearchByXY()"></td>
        </tr>
      </table>
    </div>
  </form>

<table width="926" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="420" height="300"><div style="width:420px; height:300px; overflow-y:auto;">
          <div id="result"></div>
      </div></td>
      <td width="500" valign="top"><div id="mapObj" class="view" style="width:500px;height:300px"></div></td>
  </table>
  <SCRIPT LANGUAGE="JavaScript">
  //初始化FLASH引擎
  var city_center_index="fjtekqrposNKGE,hrlphplnJOOE";
  //设置地图初始化参数对象
  var mapOptions = new MMapOptions();
  mapOptions.mapId = "fmptest";
  mapOptions.zoomLevel = 10;
  mapOptions.center = new MLatLng(city_center_index);
  
  
  //创建地图对象
  var mapObj = new MMap("mapObj", mapOptions);
  mapObj.showNavigator(true);
  </SCRIPT>
</body>
</html>

　空间查询返回顶部

　　想任意划定搜索的范围吗？MapABC地图API最神奇的查询功能莫过于空间查询了，您可以在地图上划定任意形状区域，在该区域内用关键字搜索。下面的例子演示了用矩形划定搜索范围。参考API 类手册，稍微修改一下代码，您可以试试用多边形来划定搜索范围。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3" type="text/javascript"></script>
<script src="http://api.mapabc.com/api/v1.0/js/ajaxsis.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3" type="text/javascript"></script>
<script type="text/javaScript" language="JavaScript" src="http://www.mapabc.com/html/js/ajax/prototype.js"></script>
<title>空间查询地图影射页面</title>
<style type="text/css">

</style>
<script language="javascript">
var gold = 0;
function output(event)
{
   if (mapObj.getZoomLevel() > 9) {
		var xy = event.args.substring("11",event.args.lastIndexOf(","));
	} else {
		var xy = event.args.substring("10",event.args.lastIndexOf(","));
	}
   if (gold == 1) {
   	   var poi_xy = xy.split(",");
   	   var poiXY = poi_xy[0] + ";" + poi_xy[1] + ";" + poi_xy[2] + ";" + poi_xy[3];
   	   document.getElementById("coors").value=poiXY;
   } else if (gold == 2) {
   	   var poi_xy = xy.split(",");
   	   document.getElementById("coors").value=xy + "," + poi_xy[0] + "," + poi_xy[1];
   }
}

/**
 //data参数表示服务器端给客户端返回的JSON对象
 //通过循环JSON对象里的poilist将值遍历出来，在此JSON对象里的数组为poilist
 //如果想了解JSON对象请登陆http://org.json.com英文网站进行查询
**/
function searchByRectAndPolygonCallBack(data)
{
	//在html里加入表格
	var html = "<table width='100%' border='0'>";
	//判断返回值是否为空
	if (data.count != 0) {
		for (var i = 0; i < data.searchresult.list.length; i++) {
			//用data.poilist[i].属性名称 得到值
			var name = data.searchresult.list[i].name;
			if (name == "") {
				name = "暂无";
			}
			var type = data.searchresult.list[i].type;
			if (type == "") {
				type = "暂无";
			}
			var address = data.searchresult.list[i].address;
			if (address == "") {
				address = "暂无";
			}
			var tel = data.searchresult.list[i].tel;
			if (tel == "") {
				tel = "暂无";
			}
			var x = data.searchresult.list[i].x;
			var y = data.searchresult.list[i].y;
			drawPoint(name,type,address,tel,x,y,i);
			html += "<tr><td colspan='2' onclick=\"mapObj.setCenterByLatLng('"+y+"','"+x+"');mapObj.openTipById('"+(i+1)+"')\"><div align='left' class='style3'>"+(i+1)+"  "+name+"</div></td></tr><tr><td><div align='right' class='style2'>类型：</div></td><td class='style2'>"+type+"</td></tr><tr><td><div align='right' class='style2'>地址：</div></td><td class='style2'>"+address+"</td></tr><tr><td><div align='right' class='style2'>电话：</div></td><td class='style2'>"+tel+"</td></tr>";
		}
	} else {
		alert("对不起！此城市没有您要查找的关键字");
	}
	html += "</table>";
	$('result').innerHTML= html;
}

/**
 //画POI点方法
**/
function drawPoint(name,type,address,tel,x,y,id)
{	
	
	mapObj.removeAllRectOverlays();//清理所有的矩形
	mapObj.removeAllPolygonOverlays();//清理所有的多边形
	mapObj.quitMouseDraw();//停止绘图
	var pointStyle = new MStyle();//调用MStyle设置TIP窗口样式
	pointStyle.lineColor = 0xFFFFFF;//lineColor：线条颜色，RGB颜色格式
	pointStyle.lineSize = 2;//lineSize：线条的宽度。单位是像素
	pointStyle.fillColor = 0x4b8bd9;//fillColor：填充颜色，RGB颜色格式
	pointStyle.fillOpacity = 80;//fillOpacity：填充的不透明度
	pointStyle.labelColor = 0xFFFFFF;//labelColor：tips的label文字颜色，RGB颜色格式
	pointStyle.leading = 2;//leading：文字行距
	   var sContent = "<font color='#ffffff'><b>"+name+"</b></font><br>";
	   if (!type == "" && type != null) {
			sContent += "<font color='#ffffff'>类型:"+type+"</font><br/>";
	   }
	   if (!address == "" && address != null) {
			sContent += "<font color='#ffffff'>地址:"+address+"</font><br/>";
	   }
	   if (!tel == "" && tel != null) {
			sContent += "<font color='#ffffff'>电话:"+tel+"</font><br/>";
	   }
	   pointStyle.textContent = sContent;//textContent：tip窗口的文本内容
	   point = new MPointOverlay(new MLatLng(y,x), id+1, pointStyle, id+1);//MPointOverlay：在地图上显示为一个有位置的点，有自己的样式和tip，能够接收事件。
	   mapObj.addOverlay(point, true);	
}

function rectDrawn(event)
{
    output(event);
}

function polygonDrawn(event)
{
	output(event);
}

function beginDrawRectOnMap()
{
	gold = 1;
	var rectStyle = new MStyle();
    rectStyle.lineColor = 0x00ff00;//lineColor：线条颜色，RGB颜色格式
    rectStyle.lineSize = 3;//lineSize：线条的宽度。单位是像素
    rectStyle.fillOpacity = 30;//fillOpacity：填充的不透明度
    rectStyle.fillColor = 0x009999;//fillColor：填充颜色，RGB颜色格式
    mapObj.beginDrawRectOnMap(rectStyle);
    mapObj.addEventListener(MMap.EVENT_RECT_DRAWN, rectDrawn);
}

</script>
</head>

<body>
<form name="form1" method="post" action="">
  <div>
    <table width="75%" border="0" align="center" bgcolor="#f8f8f8" style="border:1px solid #e1e1e1; margin-top:20px;" >
      <tr>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td width="44%"><div align="right" class="style6">关键字：</div></td>
        <td width="56%"><input name="keyword" type="text" id="keyword" value="餐厅"></td>
      </tr>
      <tr>
        <td><div align="right" class="style6">返回数据数量：</div></td>
        <td><input name="pageNum" type="text" id="pageNum" value="10"></td>
      </tr>
      <tr>
        <td><div align="right" class="style6">记录总数量：</div></td>
        <td><input name="pageSum" type="text" id="pageSum" value="1"></td>
      </tr>
      <tr>
        <td><div align="right" class="style6">经纬度：</div></td>
        <td><span class="style6">
          <input name="coors" type="text" id="coors"  disabled >
          <span class="style1"> <a href="javascript:beginDrawRectOnMap()">画矩形框</a> (点击后在地图上划定搜索范围)</span></span></td>
      </tr>
      <tr>
        <td><div align="right" class="style6">批量显示数量：</div></td>
        <td><input name="batch" type="text" id="batch" value="1">
        </td>
      </tr>
      <tr>
        <td><div align="right"></div></td>
        <td><input type="button" name="Submit" value="提交"  onClick="searchByRectAndPolygon();">      
        <input type="button" name="Submit" value="清除" onclick="mapObj.removeAllOverlays();"></td>
      </tr>
    </table>
  </div>
</form>
<table width="926" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="420" height="300"><div style="width:420px; height:300px; overflow-y:auto;">
          <div id="result"></div>
      </div></td>
      <td width="500" valign="top"><div id="mapObj" class="view" style="width:500px;height:300px"></div></td>
  </table>
<SCRIPT LANGUAGE="JavaScript">
//////////flash引擎///////////////
var city_center_index="fjtekqrposNKGE,hrlphplnJOOE";
//设置地图初始化参数对象
var mapOptions = new MMapOptions();
mapOptions.mapId = "fmptest";
mapOptions.zoomLevel = 10;
mapOptions.center = new MLatLng(city_center_index);
  
//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);
mapObj.showNavigator(true);
//////////flash引擎 end////////////
</SCRIPT>
</div>
</body>
</html>