[前言:]
2008年2月,中国知名地图服务商MapABC(www.mapabc.com )发布免费API(地图通用接口), 这个接口一经发布后,得到了大量中小网站的热烈欢迎和响应。截止到2008年11月,已有超过15000家网站申请获得了免费API的key, 同时他们中的大多数也都陆续利用API开发生成了自己的免费地图。
那么什么是MapABC API呢?简单来说 MapABC API包括MapABC地图API和MapABC搜索API。MapABC地图API可以让您在自己的网页中嵌入地图,制作基于地图的应用,并提供了封装JavaScript接口的Flash地图引擎和Ajax地图引擎,通过接口您可以像MapABC地图网站一样,给地图添加各类标注,并显示信息提示窗口。 MapABC搜索API为您提供了丰富的地图数据搜索接口,并提供了值得信赖的基础地图数据和强大的用户地图数据,这些数据都可以展现在您的地图中。
下面这个教程就是一个非常浅显易懂的教程,通过仔细阅读它,你可按照教程中的一步步操作来制作自己的免费地图。而且这个地图会有很高的灵活性,可以和自己网站的数据进行结合,将会使你的网站有一个全新的技术飞跃。下面就让我们正式开始本教程吧!
[关于MapABC]:
MapABC是中国领先的电子地图服务商,是Google 新浪 微 软搜房等众多中国领先网站的网络地图唯一合作伙伴。在2008年1月初,在由中国互联网协会及中国计算机用户协会联合主办的IT影响中国的大型网络调查活动中,MapABC获得中国互联网地图技术服务市场覆盖率最高品牌奖。
MapABC的地图服务可以提供用户从基本地图数据浏览(国内373个城市)和公交换乘驾车查询及实时路况等在内的众多服务,除了这些基础服务外,MapABC还与移动运营商合作开展手机定位和无线地图等服务,为人们的出行导航提供最贴身的服务。
1. 制作地图频道前的准备工作(MapABC API key申请)
在使用MapABC API之前,首先我们需要到:http://code.mapabc.com/signup.shtml申请一个属于你们网站的KEY,申请步骤很简单,只要在我的网址中填入你们网站的域名,点击“生成 API KEY”按钮即可,申请KEY是完全免费的。
如图:1-1
a) 在页面中加载地图其实是非常简单的意见事情,首先我们来看一段代码:
示例代码参见:1_页面中怎样加载一个地图.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>例子-1</title> <script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=你申请的key"></script> </head> <body> <DIV id="地图容器的ID " style="WIDTH: 500px;HEIGHT: 500px">正在加载地图...</DIV> <SCRIPT LANGUAGE="JavaScript"> var mapOptions = new MMapOptions(); var mapObj = new MMap("地图容器的ID ", mapOptions); </SCRIPT> </body> </html> |
在上边的例子中红色区域为关键点,以下是关键点介绍:
1. 首先,我们如果要在页面中加载地图引擎,就必须要引用fmp.js这个JS,并在在后边需要跟上你申请的key。
2. 接下来我们需要为地图引擎准备一个容器,同时你需要给该容器定义一个ID,例如:id="地图容器的ID " ,值得一提的是,这个容器的宽度和高度就是稍后地图引擎的高度。
3. 最后一步,加载地图引擎调用的JS代码:
var mapOptions = new MMapOptions();
var mapObj = new MMap("地图容器的ID", mapOptions);
需要注意的是,蓝色部分一定是地图容器中你定义的ID。
完成上边的3个步骤,一个地图引擎的页面加载就完成了。
本地调试地图引擎中需要注意的小知识:
如何在客户端调试Mapabc Flash地图引擎功能?
Mapabc地图API采用Flash 技术实现,本地调试会遇到Flash安全策略限制问题。从Flash 8开始,默认本地域不能访问网络,您在本地运行地图应用时,可能会遇到这样的提示:
您需要对Flash播放器的安全策略进行设置,具体步骤如下:
第一步:下载 set_flash_policy.rar 文件,解压到一个目录,如C:/
第二步:运行set_flash_policy.cmd文件,完成对Flash播放器安全策略的修改。
set_flash_policy.cmd默认设置在您的C盘、D盘、E盘、F盘的Flash有访问网络的权限,如果没有您的盘符,可以修改set_flash_policy.cmd的内容,加上您的盘符,或者去掉不需要的盘符。
Flash安全性原理请参考Flash Player 8 中的安全性更改。
3. 结合MapABC Search API进行位置搜索
示例代码参见:2_ 使用Search API进行位置搜索.html
<!DOCTYPE html PUBLIC "-//W 3C //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" /> <title>使用Search API进行位置搜索</title> <script src="http://api.mapabc.com/api/v1.0/js/ajaxsis.js?key=申请的key" type="text/javascript"></script> </head> <body> <SCRIPT LANGUAGE="JavaScript"> function searchByKeyword(){ var sis = new MSISSearch();//自定义sis变量调用查询方法 var searchpointpara = new MSearchPointPara();//自定义searchpointpara变量调用设置参数方法 sis.setSISCallbackFunction(keywordCallBack); //开始把得到的参数传入set方法中 searchpointpara.setCitycode("010"); searchpointpara.setKeyword("天安门"); sis.searchByKeyword(searchpointpara); } /** //data参数表示服务器端给客户端返回的JSON对象 //通过循环JSON对象里的poilist将值遍历出来,在此JSON对象里的数组为poilist //如果想了解JSON对象请登陆http://org.json.com英文网站进行查询 **/ function keywordCallBack(data) { var html = ""; if (data.count != 0) { for (var i = 0; i < data.poilist.length; i++) { //用data.poilist[i].属性名称 得到值 var name = data.poilist[i].name; var address = data.poilist[i].address; var tel = data.poilist[i].tel; var type = data.poilist[i].type; var pid = data.poilist[i].pguid; var citycode = data.poilist[i].citycode; var x = data.poilist[i].x; var y = data.poilist[i].y; html += "<li>名称:"+name+"<//li><li>地址:"+address+"<//li><li>电话:"+tel+"<//li><li>--------------------------<//li>"; } document.getElementById("SearchDIV").innerHTML = html; } else { alert("对不起!此城市没有您要查找的关键字"); } } </SCRIPT> <A HREF="javascript:searchByKeyword()">开始搜索“城市:北京,关键字:天安门”</A> <div id="SearchDIV"></div> </body> </html> |
关键点:
1. 使用MapABC Search API其实和加载Flash地图引擎一样,在页面一开始需要去加载一个ajaxsis.js JS,并在在后边需要跟上你申请的key。
2. 接下来需要定义一个搜索方法:
function searchByKeyword(){
var sis = new MSISSearch(); //自定义sis变量调用查询方法
var searchpointpara = new MSearchPointPara();
sis.setSISCallbackFunction(keywordCallBack);
searchpointpara.setCitycode("010");
searchpointpara.setKeyword("天安门");
sis.searchByKeyword(searchpointpara);
}
keywordCallBack:定义一个搜索结果的回掉方法
010:定义搜索城市的编码
天安门:定义搜索关键字
3. 定义一个搜索完成后的回掉方法:
function keywordCallBack(data){
var html = "";
if (data.count != 0) {
for (var i = 0; i < data.poilist.length; i++) {
//用data.poilist[i].属性名称 得到值
var name = data.poilist[i].name;
var address = data.poilist[i].address;
var tel = data.poilist[i].tel;
var type = data.poilist[i].type;
var pid = data.poilist[i].pguid;
var citycode = data.poilist[i].citycode;
var x = data.poilist[i].x;
var y = data.poilist[i].y;
html += "<li>名称:"+name+"<//li><li>地址:"+address+"<//li><li>电话:"+tel+"<//li><li>--------------------------<//li>";
}
document.getElementById("SearchDIV").innerHTML = html;
} else {
alert("对不起!此城市没有您要查找的关键字");
}
}
var name = data.poilist[i].name; 搜索结果的名称
var address = data.poilist[i].address; 搜索结果的地址
var tel = data.poilist[i].tel; 搜索结果的电话
var type = data.poilist[i].type; 搜索结果的类型
var pid = data.poilist[i].pguid; 搜索结果的唯一ID
var citycode = data.poilist[i].citycode; 搜索结果的城市编码
var x = data.poilist[i].x; 搜索结果的坐标X
var y = data.poilist[i].y; 搜索结果的坐标Y
其中搜索结果的坐标XY,是用于在地图上标注该位置点时使用的,稍后我们会说到。
完成以上三个步骤,就实现了一个位置搜索功能,当然光有搜索是不行的,我们还需要将搜索结果跟地图结合起来。
示例代码参见:3_在地图上添加单点.htm
<!DOCTYPE html PUBLIC "-//W 3C //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" /> <title>在地图上添加单点</title> <script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=1557766abd 1c 0c 689304a 34236065547a 118cbaf0ebeaa4119e972aa91b 66320418f 61ecfa720ef7"></script> <script src="http://api.mapabc.com/api/v1.0/js/ajaxsis.js?key=1557766abd 1c 0c 689304a 34236065547a 118cbaf0ebeaa4119e972aa91b 66320418f 61ecfa720ef7" type="text/javascript"></script> </head> <body> <DIV id="mapObj" style="WIDTH: 500px;HEIGHT: 500px">正在加载地图...</DIV><A HREF="javascript:drawPoints()">添加一个加点</A> </div> <SCRIPT LANGUAGE="JavaScript"> var mapOptions = new MMapOptions(); 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 points = new Array(); points.push(point1); mapObj.drawPoints(points, true); }
</SCRIPT> </body> </html> |
关键点:
1. 创建一个加点方法:
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 points = new Array();
points.push(point1);
mapObj.drawPoints(points, true);
}
2. 蓝色部分是对TIP样式进行设置的项
3. 红色部分是添加点的X,Y值
示例代码参见:4_在地图上添加多点.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>在地图上添加多点</title> <script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=1557766abd 1c 0c 689304a 34236065547a 118cbaf0ebeaa4119e972aa91b 66320418f 61ecfa720ef7"></script> <script src="http://api.mapabc.com/api/v1.0/js/ajaxsis.js?key=1557766abd 1c 0c 689304a 34236065547a 118cbaf0ebeaa4119e972aa91b 66320418f 61ecfa720ef7" type="text/javascript"></script> </head> <body> <DIV id="mapObj" style="WIDTH: 500px;HEIGHT: 500px">正在加载地图...</DIV><A HREF="javascript:drawPoints()">添加多个点</A> </div> <SCRIPT LANGUAGE="JavaScript"> var mapOptions = new MMapOptions(); var mapObj = new MMap("mapObj", mapOptions);
function drawPoints(){ |