1. Hello World
让我们从最简单的“Hello, World”开始吧。下面的例子显示一个500*400的地图，中心点位于北京的故宫博物院。
<!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: 500px; height: 400px"></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);
</script>
</body>
</html>在上面的例子中，地址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代码调用。
下面的例子运行后，在页面下方有四个按钮，分别是“拉框放大”、“拉框缩小”、“测距”和“平移地图”。测距时可以双击结束测距，也可以点击“平移地图”退出测距状态。
<!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 = 10;
//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");
//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);
</script>
<input type="button" onClick="javascript:mapObj.frameZoomIn();" value="拉框放大" /> <input type="button" onClick="javascript:mapObj.frameZoomOut();" value="拉框缩小" /> <input type="button" onClick="javascript:mapObj.measure();" value="地图测距" />
<input type="button" onClick="javascript:mapObj.quitMouseDraw();" value="平移地图" />
</body>
</html>下面这个例子先显示一张地图，等待2秒钟后，地图的中心会移动到一个新的坐标上。
<!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: 500px; height: 300px"></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);
//将地图的中心移到一个新的坐标
window.setTimeout(function() {mapObj.setCenterByLatLng('LQGXQQNRHHHD','JIOMSSPURUHPHH')}, 2000);
</script>
</body>
</html>您可以根据需要，加载或卸载地图上的鹰眼，还可以设置鹰眼的大小比例。
<!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: 500px; height: 300px"></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);
//设置罗盘大小为原来的70%
//mapObj.setCompassScale(70);
//卸载罗盘
//mapObj.removeCompass();
</script>
<input type="button" onClick="javascript:mapObj.setCompassScale(70);" value="点击设置罗盘大小为原来的70%" />
<input type="button" onClick="javascript:mapObj.removeCompass();" value="点击卸载罗盘" />
</body>
</html>小提示：修改代码中的鹰眼比例，点击“运行代码”，看看有什么效果。
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>MapABC地图API不仅提供缺省的标注样式，还允许您用图片和Flash动画标注。下面这个例子与前一个例子的功能相同，只不过是把标注点换成了Flash动画。
<!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 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替换代码中的……，看看运行的效果。
您可以一次标注多个点，标注后，为了同时在地图内显示这些标注，地图会自动调整视野。
<!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 = 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>
<input type="button" onClick="javascript:mapObj.removeAllPointOverlays();" value="删除全部的点" />
</body>
</html>下面这个例子演示了在地图上画多折线的功能。您可以设置多折线的样式。
<!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 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>小提示：您可以试着修改多折线的样式参数，比如修改宽度、透明度、颜色，然后运行一下，看看效果如何。
在实现拉框搜索、拉框选择时都需要用到矩形。下面这个例子演示了如何在地图上画一个矩形。
<!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 = 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。
<!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 = 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您可以随心所欲的用鼠标在地图上绘制几何图形。下面的例子演示了使用鼠标画点、多折线、多边形、矩形、圆、正多边形等几何图形，也演示了如何删除绘制的图形。
<!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 = 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>
<input type="button" onClick="javascript:mapObj.removeAllPolylineOverlays();" value="删除全部多折线" /> <input type="button" onClick="javascript:mapObj.removeAllRectOverlays();" value="删除全部矩形" /> <input type="button" onClick="javascript:mapObj.removeAllPolygonOverlays();" value="删除全部多边形" /> <input type="button" onClick="javascript:mapObj.removeAllCircleOverlays();" value="删除全部圆形" /> <input type="button" onClick="javascript:mapObj.removeAllRegularPolygonOverlays();" value="删除全部正多边形" /> <input type="button" onClick="javascript:mapObj.removeAllOverlays();" value="删除全部标记物" /><br>
</body>
</html>6. 事件处理
事件是面向对象编程的强大工具，可以提高应用的交互性。MapABC地图API提供了大量的事件，让您轻松开发更多互动应用。
鼠标单击事件是最常用的事件，注册一个单击事件的事件处理函数，当鼠标在地图上单击时，会把地图的id，当前的缩放级别，鼠标点击处的坐标返回到事件处理函数里。
<!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 = 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>7. 右键菜单
想实现更多的定制化？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 = 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="增加第二个右键菜单" />
<input type="button" onClick="javascript:mapObj.removePopupMenuItem('menu1');" value="删除第一个右键菜单" />
<input type="button" onClick="javascript:mapObj.removePopupMenuItem('menu2');" value="删除第二个右键菜单" />
</body>
</html>8. 地图编辑功能
想做一个像MapABC炫地图（diy.mapabc.com）那样的应用吗？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 = 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();
}
//导出地图数据事件处理函数
function onexportMapData(event){
alert(event.args);
/**
event.type=”onExportMapData”
event.args=mapId,jsonString
args 的值是一个以“,”分隔的字符串，其中：
mapId：地图的Id
jsonString：整个地图的几何对象的JSON 字符串。
**/
}
</script>
操作方法: 先在 地图上左键标点 并填入标题 内容点击确定. 然后点击导出数据<br /><br />
<input type="button" onClick="javascript:editMode();" value="进入编辑模式" />
<input type="button" onClick="javascript:createPoint();" value="添加点" />
<input type="button" onClick="javascript:createPolygon();" value="添多边形" />
<input type="button" onClick="javascript:createPolyline();" value="添折线" />
<input type="button" onClick="javascript:exportMapData();" value="导出数据" />
</body>
</html>在地图上编辑的内容可以导入、导出，因为您可以把编辑好的内容导出后保存起来，使用时再导入到地图中即可重现原有的内容。
<!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 = 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"/>
<!--请您根据自己网站情况把key替换成您需要的key，在此只是做一个示例。例:http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=yourkey-->
<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公里范围内所有的餐厅”这样的功能。下面这个例子需要输入两个关键字，一个关键字用于定位中心点，另一个关键字用于在中心点附近查询。
<!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">
<!--请您根据自己网站情况把key替换成您需要的key，在此只是做一个示例。例:http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=yourkey-->
<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 sis;
function localSearchByKeyword()
{
mapObj.removeAllOverlays();//在每次执行新查询时，先删除已经查出的POI点
//以下是从文本框中得到查询参数
var citycode = document.form1.citycode.value;
var centerKeyword = document.form1.centerKeyword.value;
var keyword = document.form1.keyword.value;
var searchType = document.form1.searchType.value;
var number = document.form1.number.value;
var range = document.form1.range.value;
var batch = document.form1.batch.value;
sis = new MSISSearch();//自定义sis变量调用查询方法
var sp = new MSearchPointPara();//自定义sp变量调用设置参数方法
//设置自定义函数名称，sis.setSISCallbackFunction(自定义函数名称)，此处自定义函数名称要与下面自定义函数名称一致
sis.setSISCallbackFunction(localkeywordCallBack);
//开始把得到的参数传入set方法中
sp.setCitycode(citycode);
sp.setCenterKeyword(centerKeyword);
sp.setKeyword(keyword);
sp.setSearchType(searchType);
sp.setRange(range);
sp.setNumber(number);
sp.setBatch(batch);
sis.localSearchByKeyword(sp);
}
/**
//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的鼠标单击事件……
<!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">
<!--请您根据自己网站情况把key替换成您需要的key，在此只是做一个示例。例:http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=yourkey-->
<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 sis;
function localsearchByXY()
{
mapObj.removeAllOverlays();//在每次执行新查询时，先删除已经查出的POI点
//以下是从文本框中得到查询参数
var citycode = document.form1.citycode.value;
var cenX = document.form1.cenX.value;
var cenY = document.form1.cenY.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;
var range = document.form1.range.value;
if(citycode == ""){
alert("请填写城市区号，此处不能为空!");
return false;
}
if(keyword == ""){
alert("请填写查询关键字，此处不能为空!");
return false;
}
sis = new MSISSearch();//自定义sis变量调用查询方法
var sp = new MSearchPointPara();//自定义sp变量调用设置参数方法
//设置自定义函数名称，sis.setSISCallbackFunction(自定义函数名称)，此处自定义函数名称要与下面自定义函数名称一致
sis.setSISCallbackFunction(localsearchXYCallBack);
//开始把得到的参数传入set方法中
sp.setCitycode(citycode);
sp.setCenX(cenX);
sp.setCenY(cenY);
sp.setKeyword(keyword);
sp.setSearchType(searchType);
sp.setRange(range);
sp.setNumber(number);
sp.setBatch(batch);
sis.localSearchByXY(sp);
}
/**
//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">
<!--请您根据自己网站情况把key替换成您需要的key，在此只是做一个示例。例:http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=yourkey-->
<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;
}
.style1 {color: #FF0000}
.style4 {font-size: small; }
.style5 {font-size: small;color: #FF0000}
.style3 {color: #FF0000; font-size: 12px; }
.style6 {font-size: 12px; }
-->
</style>
<script language="javascript">
var gold = 0;
function output(event)
{
var xy = event.args.substring("11",event.args.lastIndexOf(","));
//alert(xy):
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];
}
}
function searchByRectAndPolygon()
{
mapObj.removeAllOverlays();//在每次执行新查询时，先删除已经查出的POI点
//以下是从文本框中得到查询参数
var keyword = document.form1.keyword.value;
var pageNum = document.form1.pageNum.value;
var pageSum = document.form1.pageSum.value;
var batch = document.form1.batch.value;
var coor = document.form1.coors.value;
var buffer = "0";
var sortRule = "";
var type = "rect";
if (coor == "") {
alert("请您点击 画矩形框 连接");
return false;
}
var sis = new MSISSearch();//自定义sis变量调用查询方法
var searchSpatialPara = new MSearchSpatialPara();//自定义searchSpatialPara变量调用设置参数方法
//设置自定义函数名称，sis.setSISCallbackFunction(自定义函数名称)，此处自定义函数名称要与下面自定义函数名称一致
sis.setSISCallbackFunction(searchByRectAndPolygonCallBack);
//开始把得到的参数传入set方法中
searchSpatialPara.setKeyword(keyword);
searchSpatialPara.setSearchType("");
searchSpatialPara.setPageNum(pageNum);
searchSpatialPara.setPageSum(pageSum);
searchSpatialPara.setBatch(batch);
if (gold == 1) {
searchSpatialPara.setBounds(coor);
} else if (gold == 2) {
searchSpatialPara.setCoor(coor);
}
searchSpatialPara.setBuffer(buffer);
searchSpatialPara.setSortRule(sortRule);
searchSpatialPara.setType(type);
sis.searchByRectAndPolygon(searchSpatialPara);
}
/**
//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>
评论（0）
暂无评论。