木子屋
 

标题: MapABC地图API应用举例

作者: dnawo

日期: 2008-06-04 10:22 AM

分类: 脚本语言

内容: 北京图盟科技有限公司（以下简称Mapabc）是中国领先的基础地图服务提供商，Mapabc使合作伙伴无需自建地图平台，只需从远程调用Mapabc.com，就可以获取基础地图、黄页数据、公交换乘、驾车路径等基础地图服务资源。MapABC 地图API是一组JavaScript类及函数。使用这些API，您可以方便的在您的网页中使用MapABC提供的地图及搜索功能。
1. Hello World
让我们从最简单的“Hello, World”开始吧。下面的例子显示一个500*400的地图，中心点位于北京的故宫博物院。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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);

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
在上面的例子中，地址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代码调用。
下面的例子运行后，在页面下方有四个按钮，分别是“拉框放大”、“拉框缩小”、“测距”和“平移地图”。测距时可以双击结束测距，也可以点击“平移地图”退出测距状态。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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);


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
下面这个例子先显示一张地图，等待2秒钟后，地图的中心会移动到一个新的坐标上。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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);

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
您可以根据需要，加载或卸载地图上的鹰眼，还可以设置鹰眼的大小比例。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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();

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
小提示：修改代码中的鹰眼比例，点击“运行代码”，看看有什么效果。
3. 在地图上标注
MapABC地图API提供丰富的标注功能。这个例子在地图上放置一个标注，点击标注，会打开该标注的信息窗口。当然，您也可以用方法添加标注、删除标注、打开信息窗口。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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 = "Hello Word!小学";
sContent += "这个是我的加点程序!";
sContent += "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);
}

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
MapABC地图API不仅提供缺省的标注样式，还允许您用图片和Flash动画标注。下面这个例子与前一个例子的功能相同，只不过是把标注点换成了Flash动画。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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 = "中信银行富华大厦支行";
sContent += "北京东城区朝阳门北大街8号富华大厦C座";
sContent += "邮政编码：100027 ";
sContent += "电话：010-65543647";
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 为自动调整视野
}

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
小提示：用您自己的Flash动画URL或者图片的URL替换代码中的……，看看运行的效果。
您可以一次标注多个点，标注后，为了同时在地图内显示这些标注，地图会自动调整视野。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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 = "第一个点的文字描述详细信息";
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 = "第二个点的文字描述详细信息";
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 = "第三个点的文字描述详细信息";
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 = "第四个点的文字描述详细信息";
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();

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
下面这个例子演示了在地图上画多折线的功能。您可以设置多折线的样式。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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 为自动调整视野
}

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
小提示：您可以试着修改多折线的样式参数，比如修改宽度、透明度、颜色，然后运行一下，看看效果如何。
在实现拉框搜索、拉框选择时都需要用到矩形。下面这个例子演示了如何在地图上画一个矩形。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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);
}

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
4. 画公交线路
在地图上画一条公交换乘的路线，并且有小车演示行驶过程，其中还有一个换乘点。您可能会奇怪公交线路的数据是从哪取得的，请参考公交查询API。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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 为自动调整视野
}

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
5. 用鼠标画图
使用MapABC地图API您可以随心所欲的用鼠标在地图上绘制几何图形。下面的例子演示了使用鼠标画点、多折线、多边形、矩形、圆、正多边形等几何图形，也演示了如何删除绘制的图形。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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);
}




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
6. 事件处理
事件是面向对象编程的强大工具，可以提高应用的交互性。MapABC地图API提供了大量的事件，让您轻松开发更多互动应用。
鼠标单击事件是最常用的事件，注册一个单击事件的事件处理函数，当鼠标在地图上单击时，会把地图的id，当前的缩放级别，鼠标点击处的坐标返回到事件处理函数里。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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);
}

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
7. 右键菜单
想实现更多的定制化？MapABC地图API让您随意定义右键菜单。您可以增加自己的右键菜单选项。点击右键菜单，选择菜单项后，地图引擎会抛出右键菜单点击事件，并传出当前点击的参数。您可以在右键菜单事件处理函数里添加代码，实现菜单项对应的功能。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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);
}





[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
8. 地图编辑功能
想做一个像MapABC炫地图（diy.mapabc.com）那样的应用吗？MapABC地图API提供了地图编辑接口，您可以在地图上标注，或者编辑标注的内容。不仅点可以用来标注，线和面都可以作为标注的工具。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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 字符串。
**/
}
操作方法: 先在 地图上左键标点 并填入标题 内容点击确定. 然后点击导出数据






[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
在地图上编辑的内容可以导入、导出，因为您可以把编辑好的内容导出后保存起来，使用时再导入到地图中即可重现原有的内容。
HTML代码
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3">
//创建一个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":"晨报讯(记者 杨莲洁) 前天，徐静蕾做客MapABC图盟科技，和北京电影学院93级表演系的同班同学杨飞(现任MapABC业务拓展部经理)聚会。毕业十年再聚首，老同学一起回忆过去，想起当年同学的旧事，徐静蕾不禁泪如雨下，一旁的同学刘孜也陪同伤感落泪。","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":"徐静蕾做客《快乐大本营》　　前日，徐静蕾在长沙参加某公司在《快乐大本营》录制的产品发布会，当主持人下台拿道具时，便不见踪影。并取消了弹钢琴和简短访谈节目，让“蕾丝”们十分失望。更有观众表示，老徐下台后好像在化妆间里“吞云吐雾”。 　　前晚的《快乐大本营》现场挂着好几幅老徐代言的广告宣传画。徐静蕾身穿白色无袖V领衣、黑色宽大裙裤、白色平底鞋清爽出场。随后，当老徐在观看自己的一段广告工作花絮时，眉头一紧、嘴巴一抿、脸蛋一垮，严肃的表情让观众们整齐地发出惊叹声。可能是意识到自己“职业病”犯了，老徐展开笑脸冲着观众乐呵呵地笑起来。 　　从现场工作人员手中的节目表来看，老徐在节目开始不久将有钢琴表演，节目尾声还有段与谢娜合作的简短博客访问。老徐在参与第一个节目时，何炅、谢娜等主持人原本邀请老徐参加一个舞龙游戏，就在主持人下台拿道具时，老徐不打声招呼就离开舞台，台上台下一片愕然。但节目录制进行两小时后，仍不见钢琴的影子。 　　对于是否有钢琴表演，老徐的随行人员表示，钢琴节目其实是个假定节目，“因为事先双方并未就此事进行沟通，所以我们不能表演这个节目，至于博客访谈，因为在第一个节目中就已经很好讲解了她的‘博客事业’，我们觉得有点重复，就取消了。” 　　待老徐的随行工作人员进入化妆间，现场一位“蕾丝”一脸惊讶地告诉身边的朋友，“刚才我从化妆间地面上的倒影看到老徐在抽烟！并且好像不太高兴的样子。当时化妆间没有工作人员守着，通过地面反光看到化妆间里有烟雾，并且老徐似乎是在做抽烟的动作，“反正里面烟雾缭绕，我从倒影里看到她老是把手放在嘴边，而且可以很清楚地看见她旁边的一个女的在抽烟。”老徐是否也在“吞云吐雾”？记者想看个究竟，但守在门口的工作人员以艺人在休息为由不准记者入内。","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":"梦想照进现实","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);
}





[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
9. 搜索功能
地图最常用的用法就是查询了，下面这个例子使用了MapABC 地图API的搜索功能，根据输入的关键字查询结果，并把查询的结果标注到地图上。
HTML代码http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" >
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=yourkey-->
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3" type="text/javascript">
http://api.mapabc.com/api/v1.0/js/ajaxsis.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3" type="text/javascript">
http://www.mapabc.com/html/js/ajax/prototype.js">
关键字查询
body{ font-size:12px; margin:0; padding:0;}
#mapObj {
height: 300px;
width: 500px;
}
.style2 {font-size: small; }
.style3 {font-size: small;color: #FF0000}
http://org.json.com英文网站进行查询
**/
function keywordCallBack(data)
{
//在html里加入表格
var html = "";
//判断返回值是否为空
if (data.count != 0) {
for (var i = 0; i "+data.poilist[i].name+"";
if (!type == "" && type != null) {
sContent += "类型:"+type+"
";
}
if (!address == "" && address != null) {
sContent += "地址:"+address+"
";
}
if (!tel == "" && tel != null) {
sContent += "电话:"+tel+"
";
}
pointStyle.textContent = sContent;//textContent：tip窗口的文本内容
point = new MPointOverlay(new MLatLng(y,x), i+1, pointStyle, i+1);//MPointOverlay：在地图上显示为一个有位置的点，有自己的样式和tip，能够接收事件。
mapObj.addOverlay(point, true);
html += ""+(i+1)+" "+data.poilist[i].name+"类型："+type+"地址："+address+"电话："+tel+"";
}
} else {
alert("对不起！此城市没有您要查找的关键字");
}
html += "";
$('result').innerHTML= html;
}
//关键字查询代码结束-->





关键字查询


城市代码：

北京市
上海市
天津市
重庆市



关键字：



关键字类型：



返回数据数量：



批量显示数量：




















//////////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////////////

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
中心点查询可以让您实现如“查找在故宫周围1公里范围内所有的餐厅”这样的功能。下面这个例子需要输入两个关键字，一个关键字用于定位中心点，另一个关键字用于在中心点附近查询。
HTML代码http://www.w3.org/TR/html4/loose.dtd">
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=yourkey-->
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3" type="text/javascript">
http://api.mapabc.com/api/v1.0/js/ajaxsis.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3" type="text/javascript">
http://www.mapabc.com/html/js/ajax/prototype.js">
中心点关键字查询地图影射页面
body{ font-size:12px; margin:0; padding:0;}
#mapObj {
height: 300px;
width: 500px;
}
.style2 {font-size: small; }
.style3 {font-size: small;color: #FF0000}
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 = "";
//判断返回值是否为空
if (data.count != 0) {
for (var i = 0; i "+data.poilist[i].name+"";
if (!type == "" && type != null) {
sContent += "类型:"+type+"
";
}
if (!address == "" && address != null) {
sContent += "地址:"+address+"
";
}
if (!tel == "" && !tel == null) {
sContent += "电话:"+tel+"
";
}
pointStyle.textContent = sContent;//textContent：tip窗口的文本内容
point = new MPointOverlay(new MLatLng(y,x), i+1, pointStyle, i+1);//MPointOverlay：在地图上显示为一个有位置的点，有自己的样式和tip，能够接收事件。
mapObj.addOverlay(point, true);
html += ""+(i+1)+" "+data.poilist[i].name+"类型："+type+"地址："+address+"电话："+tel+"";
}
} else {
alert("对不起！此城市没有您要查找的关键字");
}
html += "";
$('result').innerHTML= html;
}



城市代码：

北京市
上海市
天津市
重庆市




中心点关键字：



关键字：



关键字类型：



查询范围：



返回数据数量：



批量显示数量：













//初始化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);
这是中心点查询功能的另一种形式，即您已经获得了中心点的经纬度坐标，然后根据关键字查询这个中心点周边的POI。如何获得经纬度坐标？方法有很多，想想MapABC地图API的鼠标单击事件……
http://www.w3.org/TR/html4/loose.dtd">
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=yourkey-->
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3" type="text/javascript">
http://api.mapabc.com/api/v1.0/js/ajaxsis.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3" type="text/javascript">
http://www.mapabc.com/html/js/ajax/prototype.js">
经纬度查询地图影射页面
body{ font-size:12px; margin:0; padding:0;}
#mapObj {
height: 300px;
width: 500px;
}
.style2 {font-size: small; }
.style3 {font-size: small;color: #FF0000}
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 = "";
//判断返回值是否为空
if (data.count != 0) {
for (var i = 0; i "+data.poilist[i].name+"";
if (!address == "" && address != null) {
sContent += "地址:"+address+"
";
}
if (!tel == "" && !tel == null) {
sContent += "电话:"+tel+"
";
}
pointStyle.textContent = sContent;//textContent：tip窗口的文本内容
point = new MPointOverlay(new MLatLng(y,x), i+1, pointStyle, i+1);//MPointOverlay：在地图上显示为一个有位置的点，有自己的样式和tip，能够接收事件。
mapObj.addOverlay(point, true);
html += ""+(i+1)+" "+data.poilist[i].name+"地址："+address+"电话："+tel+"";
}
} else {
alert("对不起！此城市没有您要查找的关键字");
}
html += "";
$('result').innerHTML= html;
}




城市代码：

北京市
上海市
天津市
重庆市




X经度：



Y纬度：



关键字：



关键字类型：



查询范围：



返回数据数量：



批量显示数量：

















//初始化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);


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
想任意划定搜索的范围吗？MapABC地图API最神奇的查询功能莫过于空间查询了，您可以在地图上划定任意形状区域，在该区域内用关键字搜索。下面的例子演示了用矩形划定搜索范围。参考API 类手册，稍微修改一下代码，您可以试试用多边形来划定搜索范围。
HTML代码http://www.w3.org/TR/html4/loose.dtd">
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=yourkey-->
http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3" type="text/javascript">
http://api.mapabc.com/api/v1.0/js/ajaxsis.js?key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3" type="text/javascript">
http://www.mapabc.com/html/js/ajax/prototype.js">
空间查询地图影射页面
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 = "";
//判断返回值是否为空
if (data.count != 0) {
for (var i = 0; i "+(i+1)+" "+name+"类型："+type+"地址："+address+"电话："+tel+"";
}
} else {
alert("对不起！此城市没有您要查找的关键字");
}
html += "";
$('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 = ""+name+"";
if (!type == "" && type != null) {
sContent += "类型:"+type+"
";
}
if (!address == "" && address != null) {
sContent += "地址:"+address+"
";
}
if (!tel == "" && tel != null) {
sContent += "电话:"+tel+"
";
}
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);
}






关键字：



返回数据数量：



记录总数量：



经纬度：


画矩形框 (点击后在地图上划定搜索范围)


批量显示数量：
















//////////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////////////

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.755 ms

标题: MapABC地图API应用举例

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.755 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.755 ms