手把手的教你用MapABC的地图API制作自己的免费地图

最新推荐文章于 2025-08-23 18:36:39 发布

原创最新推荐文章于 2025-08-23 18:36:39 发布 · 7.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#api #javascript #function #html #callback #xhtml

本文是一篇手把手教你如何利用MapABC的免费API制作自己的地图的教程。首先需要在MapABC官网申请API key，然后在网页中加载地图引擎，结合MapABC Search API进行位置搜索，最后在地图上添加标注。教程详细解释了加载地图、搜索位置、添加点和分页等关键步骤，适合想要在网站中集成地图功能的开发者参考。

[前言：]

     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

2. 如何在页面中加载地图

a) 在页面中加载地图其实是非常简单的意见事情，首先我们来看一段代码：

示例代码参见：1_页面中怎样加载一个地图.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>例子-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，是用于在地图上标注该位置点时使用的，稍后我们会说到。

完成以上三个步骤，就实现了一个位置搜索功能，当然光有搜索是不行的，我们还需要将搜索结果跟地图结合起来。

4. 如何在地图上加点（单点）

示例代码参见：3_在地图上添加单点.htm

<!DOCTYPE html PUBLIC "-//W 3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>在地图上添加单点</title>

</head>

<body>

<DIV id="mapObj" style="WIDTH: 500px;HEIGHT: 500px">正在加载地图...</DIV><A HREF="javascript:drawPoints()">添加一个加点</A>

</div>

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值

5. 如何在地图上加点（多点）

示例代码参见：4_在地图上添加多点.html

<!DOCTYPE html PUBLIC "-//W 3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>在地图上添加多点</title>

</head>

<body>

<DIV id="mapObj" style="WIDTH: 500px;HEIGHT: 500px">正在加载地图...</DIV><A HREF="javascript:drawPoints()">添加多个点</A>

</div>

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 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);

}

</SCRIPT>

</body>

</html>

关键点：

1. 红色部分是和添加多点所增加的部分

其实添加多点和添加单点的模式是大同小异的，仔细观察红色部分即可。

6. 结合MapABC Search API 将搜索结果在页面和地图上展示

示例代码参见：5_将搜索结果在页面和地图上展示.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>

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

drawPoints(name,address,tel,x,y,i);

}

document.getElementById("SearchDIV").innerHTML = html;

} else {

alert("对不起！此城市没有您要查找的关键字");

}

function drawPoints(name,add,tel,x,y,i){

var M_points = new Array();

var TipContent = "<font color='#000000'><b>"+(i+1)+"."+name+"</b><br>";//定义TIP内容

TipContent += "地址："+add+"<br>";

TipContent += "电话："+tel+"<br>";

var M_Content = TipContent;

var M_pointStyle = new MStyle();//定义点样式

M_pointStyle.lineColor = 0xcccccc;

M_pointStyle.lineSize = 2;

M_pointStyle.fillColor = 0xffffff;

M_pointStyle.fillOpacity = 90;

M_pointStyle.textContent = M_Content;

var M_customPoint = new MCustomPointOverlay(new MLatLng(""+x+","+y+""), "http://www.mapabc.com/qnmap/images/supermap/supermap_mapnum_m"+(i+1)+".gif", M_pointStyle,i);

M_points.push(M_customPoint);

mapObj.drawCustomPoints(M_points,true);

}

</SCRIPT>

<A HREF="javascript:searchByKeyword()">开始搜索“城市：北京，关键字：天安门”</A>

<div id="SearchDIV" style="float:left;"></div>

<DIV id="mapObj" style="WIDTH: 500px;HEIGHT: 500px;float:left;">正在加载地图...</DIV>

<SCRIPT LANGUAGE="JavaScript">

var mapOptions = new MMapOptions();

var mapObj = new MMap("mapObj", mapOptions);

</SCRIPT>

</body>

</html>

关键点：

1. 我们新建了一个加点方法drawPoints(name,add,tel,x,y,i)

2. 在查询结果的循环中执行该加点方法

3. 我们使用的这个加点方法与文章之前提到的（第四部分，在地图上添加单点）所使用的加点方法不同，这是MapABC API中的另外一个加点方法。他们的区别在于drawPoints(name,add,tel,x,y,i)添加的点支持图片形式

var M_points = new Array();

var TipContent = "<font color='#000000'><b>"+(i+1)+"."+name+"</b><br>";//定义TIP内容

TipContent += "地址："+add+"<br>";

TipContent += "电话："+tel+"<br>";

var M_Content = TipContent;

var M_pointStyle = new MStyle();//定义点样式

M_pointStyle.lineColor = 0xcccccc;

M_pointStyle.lineSize = 2;

M_pointStyle.fillColor = 0xffffff;

M_pointStyle.fillOpacity = 90;

M_pointStyle.textContent = M_Content;

var M_customPoint = new MCustomPointOverlay(new MLatLng(""+x+","+y+""), "http://www.mapabc.com/qnmap/images/supermap/supermap_mapnum_m"+(i+1)+".gif", M_pointStyle,i);

M_points.push(M_customPoint);

mapObj.drawCustomPoints(M_points,true);

蓝色部分可替换成你所想要添加的图片。

7. 搜索结果的分页介绍

示例代码参见：6_如何分页.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>如何分页</title>

</head>

<body>

<SCRIPT LANGUAGE="JavaScript">

function searchByKeyword(i){

var sis = new MSISSearch();//自定义sis变量调用查询方法

var searchpointpara = new MSearchPointPara();//自定义searchpointpara变量调用设置参数方法

sis.setSISCallbackFunction(keywordCallBack);

//开始把得到的参数传入set方法中

var number = i;//查询第几页数据

if(number==null||number=="")number=1;

searchpointpara.setNumber(10);//每次查询返回的数量

searchpointpara.setBatch(i);

searchpointpara.setCitycode("010");

searchpointpara.setKeyword("天安门");

sis.searchByKeyword(searchpointpara);

}

/**

//data参数表示服务器端给客户端返回的JSON对象

//通过循环JSON对象里的poilist将值遍历出来，在此JSON对象里的数组为poilist

//如果想了解JSON对象请登陆http://org.json.com英文网站进行查询

**/

function keywordCallBack(data)

{

var html = "";

//data.count 返回结果总数

var allpage = Math.floor((data.count + 10-1) / 10);//页数

if (data.count != 0) {

for(var i=0;i<allpage;i++){

html += "<A HREF=/"javascript:searchByKeyword(/'"+(i+1)+"/')/">【"+(i+1)+"】<//A>";

}

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>";

drawPoints(name,address,tel,x,y,i);

}

document.getElementById("SearchDIV").innerHTML = html;

} else {

alert("对不起！此城市没有您要查找的关键字");

}

function drawPoints(name,add,tel,x,y,i){

var M_points = new Array();

var TipContent = "<font color='#000000'><b>"+(i+1)+"."+name+"</b><br>";//定义TIP内容

TipContent += "地址："+add+"<br>";

TipContent += "电话："+tel+"<br>";

var M_Content = TipContent;

var M_pointStyle = new MStyle();//定义点样式

M_pointStyle.lineColor = 0xcccccc;

M_pointStyle.lineSize = 2;

M_pointStyle.fillColor = 0xffffff;

M_pointStyle.fillOpacity = 90;

M_pointStyle.textContent = M_Content;

var M_customPoint = new MCustomPointOverlay(new MLatLng(""+x+","+y+""), "http://www.mapabc.com/qnmap/images/supermap/supermap_mapnum_m"+(i+1)+".gif", M_pointStyle,i);

M_points.push(M_customPoint);

mapObj.drawCustomPoints(M_points,true);

}

</SCRIPT>

<A HREF="javascript:searchByKeyword()">开始搜索“城市：北京，关键字：天安门”</A>

<div id="SearchDIV" style="float:left;"></div>

<DIV id="mapObj" style="WIDTH: 500px;HEIGHT: 500px;float:left;">正在加载地图...</DIV>

<SCRIPT LANGUAGE="JavaScript">

var mapOptions = new MMapOptions();

var mapObj = new MMap("mapObj", mapOptions);

</SCRIPT>

</body>

</html>

关键点：

1. 在searchByKeyword方法中新增了2个参数的设置

searchpointpara.setNumber(10);//每次查询返回的数量

searchpointpara.setBatch(1);//查询的批次，也可以理解为1为第一页2为第二页

2. data.count 返回结果总数

3. var allpage = Math.floor((data.count + 10-1) / 10);//页数，计算查询结果可以分多少页

分页其实非常简单，而且实现的方式也很多。

8. 如何进行公交搜索

示例代码参见：7_公交搜索.html

<!doctype html public "-//w 3c //dtd html 4.0 transitional//en">

<html>

<head>

<title>公交搜索</title>

<meta name="generator" content="editplus">

<meta name="author" content="">

<meta name="keywords" content="">

<meta name="description" content="">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<table>

<tr>

<td><span style="color:#aaa;">在</span>  北京  </td>

<td><span style="color:#aaa;">从</span>  中关村  </td>

<td><span style="color:#aaa;">到</span>  天安门  </td>

<td><input type="button" value="查询" onClick="sub()"></td>

</tr>

</table>

<TABLE>

<TR>

<TD><div id="start_content"></div><div id="end_content"></div><div id="busresultList"></div></TD>

<TD valign="top"><div id="mapObj" style="width: 500px; height: 400px;"></div>

</TD>

</TR>

</TABLE>

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

<script language="javascript">

<!--

function BusSearch(){

this.busSType="s";

this.bus_way = "0";

this.point_id ="";

this.cityname = "";

this.start_x = "";this.start_y = "";this.start_name = "";this.start_address = "";this.start_tel = "";this.start_pid = "";this.start_citycode = "";

this.start_cityname = "";this.start_detailLink="";

this.end_x = "";this.end_y = "";this.end_name = "";this.end_address = "";this.end_tel = "";this.end_pid = "";this.end_citycode = "";

this.end_cityname = "";this.end_detailLink="";

this.x_array;this.y_array;this.x_c_array;this.y_c_array;

}

var BS = new BusSearch();

function sub(){

BS.cityname = "北京";

BS.start_name = "中关村";

BS.end_name = "天安门";

busChange_Ssearch(BS.cityname,BS.start_name)

}

function busChange_Ssearch(c,s){

sis = new MSISSearch();

sp = new MSearchPointPara();

sis.setSISCallbackFunction(busChange_Ssearch_CallBack);

sp.setCitycode(c);

sp.setKeyword(s);

sp.setNumber("10");

sp.setBatch("1");

sis.searchByKeyword(sp);

}

function busChange_Ssearch_CallBack(data){

switch(data.message){

case 'ok':

if (data.count != 0) {

for (var i = 0; i < data.poilist.length; i++) {

var poi_detaillink="";

if(data.poilist[i].srctype=="basepoi"){

poi_detaillink = "http://www.mapabc.com/detail/"+data.poilist[0].citycode+"/"+data.poilist[0].pguid+".html";

}

if(data.poilist[i].srctype=="enpoi"){

poi_detaillink = data.poilist[i].dn;

}

if(BS.busSType=="s"){

//document.getElementById('start_content').innerHTML = "<strong>起点：</strong>"+BS.start_name;

BS.start_x=data.poilist[0].x;BS.start_y=data.poilist[0].y;

BS.start_name=data.poilist[0].name;BS.start_type=data.poilist[0].type;BS.start_address=data.poilist[0].address;

}

if(BS.busSType=="e"){

//document.getElementById('end_content').innerHTML = "<strong>终点：</strong>"+BS.end_name;

BS.end_x=data.poilist[0].x;BS.end_y=data.poilist[0].y;

BS.end_name=data.poilist[0].name;BS.end_type=data.poilist[0].type;BS.end_address=data.poilist[0].address;}

}else{

if(BS.busSType=="s"){document.getElementById('start_content').innerHTML = "<strong>起点：</strong>";}

if(BS.busSType=="e"){document.getElementById('end_content').innerHTML = "<strong>终点：</strong>";}

}

buschange_ESearch();

break;

default:

}

function buschange_ESearch(){

if(BS.busSType!="e"){

BS.busSType = "e";

busChange_Ssearch(BS.cityname,BS.end_name);

}else{

if(BS.start_x == "" || BS.start_x == "" || BS.end_x == "" || BS.end_y == ""){

alert("起点或者终点暂无结果，无法查询！请重新选择起点和终点！");

}else{

sis = new MSISSearch();

BS_sis = new MSearchRoutPara();

BS_sis.setCitycode(BS.cityname);

BS_sis.setStartXY(BS.start_x,BS.start_y);

BS_sis.setEndXY(BS.end_x,BS.end_y);

BS_sis.setRouteType(BS.bus_way);

BS_sis.setType("bus");//路径查询

sis.setSISCallbackFunction(busSearch_CallBack);

sis.searchBusAndDrive(BS_sis);

}

function busSearch_CallBack(data){

var busdata = new MBusData(data);

var busplans = busdata.getBusPlans();

var busplan;//以上是调用api/js/ajaxsis来得到公交换乘XY串.

BS.x_array = new Array();

BS.y_array = new Array();

BS.x_c_array = new Array();

BS.y_c_array = new Array();

var bus_content = new Array();

if(data.message=="ok"){//判断服务器是否返回数据."ok"为有返回数据.

var bus_count = data.busList.length;//返回公交换乘次数,结果是否为"0",如果是"0"无返回结果.

if(bus_count=="0"){

document.getElementById('busresultList').innerHTML="<div><strong>建议：</strong><br />1.请确保所有字词拼写正确。<br />2.尝试不同的关键字。<br />3.尝试更宽泛的关键字。</div><div class=/"supermap_wronglink/"><br /><a href=/"javascript:qn_menu('3')/">重新查询</a></div>";

}else{

bus_content.push("<strong>起点：</strong>"+BS.start_name+"<br /><strong>终点：</strong>"+BS.end_name+"<br /><span style=/"float:left;/">"+bus_count+"条线路</span><br /><table border=/"0/" cellpadding=/"0/" cellspacing=/"1/"><tr><td width=/"12%/" align=/"center/" bgcolor=/"#e6e6e6/">线路</td><td width=/"50%/" align=/"center/" bgcolor=/"#e6e6e6/">乘车方案</td><td width=/"38%/" align=/"left/" bgcolor=/"#e6e6e6/">    估计车程</td></tr></table>");

for(var i=0;i<bus_count;i++){

var bus_length=0;var bus_name="";

busplan = busplans[i];//每次公交线路

BS.x_array[i] = busplan.getBusLineXCoords();

BS.y_array[i] = busplan.getBusLineYCoords();

BS.x_c_array[i] = busplan.getExchangeStopXCoords();

BS.y_c_array[i] = busplan.getExchangeStopYCoords();//以上为每次公交线路的X,Y串和换乘点X,Y串.

var str_list = data.busList[i].segmentList.length;//每次线路的换乘次数.

var bus_text="<tr><td width=/"12%/" bgcolor=/"#efefef/"> </td><td width=/"66%/" bgcolor=/"#efefef/"><img src=/"http://www.mapabc.com/qnmap/images/supermap/supermap_start.gif/" /> 起点 "+data.busList[i].segmentList[0].startName+"</td><td width=/"22%/" bgcolor=/"#efefef/"> </td></tr>";

for(var k=0;k<str_list;k++){

if(k==(str_list-1)){

bus_name += (data.busList[i].segmentList[k].busName).split("(")[0];

}else{

bus_name += (data.busList[i].segmentList[k].busName).split("(")[0]+" <img src=/"http://www.mapabc.com/qnmap/images/supermap/supermap_arrow3.gif/" /> ";

}//得到公交车名称.

var passDepotName = (data.busList[i].segmentList[k].passDepotName).split(" ");//对途经站点名称进行分隔.

var passDepotCoor = (data.busList[i].segmentList[k].passDepotCoordinate).split(",");//对途经站点的XY进行分隔.

var passDepotNum = passDepotName.length+1;

bus_text +="<tr><td> </td><td>    步行"+getdistance(data.busList[i].segmentList[k].footLength)+"到车站</td><td> </td></tr><tr><td style=/"border-bottom:none;/"> </td><td style=/"border-bottom:none;/">"+data.busList[i].segmentList[k].busName+"<br /></td><td style=/"border-bottom:none;/" valign=/"top/"><a href=/"javascript:void(0)/">"+passDepotNum+"站</a></td></tr><tr><td style=/"border-bottom:none;/"> </td><td style=/"border-bottom:none;/">　<span style=/"color:#aaa;/">在</span> "+data.busList[i].segmentList[k].startName+" <span style=/"color:#aaa;/">上车</span></td><td style=/"border-bottom:none;/"> </td></tr><tr><td> </td><td>　<span style=/"color:#aaa;/">在</span> "+data.busList[i].segmentList[k].endName+" <span style=/"color:#aaa;/">下车</span></td><td> </td></tr>";

if(str_list==1){BS.x_c_array[i]="";}//如果换乘次数为"1",没有换乘XY.此次线路可以直达.

bus_length += parseInt(data.busList[i].segmentList[k].driverLength);//每条线路车程

}

bus_content.push("<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/" height=/"32/" id=/"table_"+i+"/"><tr><td width=/"12%/" align=/"center/">"+(i+1)+"</td><td width=/"52%/">"+bus_name+"</td><td width=/"36%/" align=/"left/">　"+getdistance(bus_length)+"</td></tr></table><table border=/"0/" cellspacing=/"0/" cellpadding=/"0/" id=/"bus_list_"+i+"/">"+bus_text+"<tr><td> </td><td>　步行"+getdistance(data.busList[i].footEndLength)+"到终点</td><td> </td></tr><tr><td bgcolor=/"#efefef/"> </td><td bgcolor=/"#efefef/"><img src=/"http://www.mapabc.com/qnmap/images/supermap/supermap_end.gif/" /> 终点 "+data.busList[i].segmentList[str_list-1].endName+"</td><td bgcolor=/"#efefef/"> </td></tr></table>");

}

document.getElementById('busresultList').innerHTML=bus_content.join("");

drawBus(BS.x_array[0],BS.y_array[0],BS.start_x,BS.start_y,BS.end_x,BS.end_y,BS.x_c_array[0],BS.y_c_array[0]);//画公交线

busDrawFoldline(0);//画所有线和点.(步行线,起点,终点)

}

function getdistance(le){//得到

if(le<=1000){

var s = le;

return s+"米";

}else{

var s = Math.round(le/1000);

return "约"+s+"公里";

}

function drawBus(arrX,arrY,qdpoix,qdpoiy,zdpoix,zdpoiy,changex,changey){//画公交线

mapObj.removeAllOverlays();//称除地图所有内容.

if('undefined' != typeof mapObj){

var startObj1=new MStyle();

startObj1.maxZoomLevel = "500";//不显示起点,

var endObj1=new MStyle();

endObj1.maxZoomLevel = "500";//不显示起点

var lineObj=new MStyle();

lineObj.lineSize=6;

lineObj.lineColor=0xff230b;

lineObj.lineOpacity="70";

var startPoint = new MPointOverlay(new MLatLng(qdpoiy,qdpoix), BS.start_name, startObj1);

var endPoint = new MPointOverlay(new MLatLng(zdpoiy,zdpoix), BS.end_name, endObj1);

if(qdpoix == "" || qdpoix == "null" || zdpoix == "" || zdpoiy =="null"){}else{

mapObj.drawBusLine(arrX, arrY, changex, changey, startPoint, endPoint, lineObj,true);

//画公交线,但不显示起点与终点.

}

function busDrawFoldline(num){//画所有线和点.(步行线,起点,终点)

var s_x = BS.x_array[num].split(',');//公交线路的X

var s_y = BS.y_array[num].split(',');//公交线路的Y

if('undefined' != typeof mapObj){

var bus_polylineStyle = new MStyle();

bus_polylineStyle.lineColor = 0x0083d6;//线的颜色

bus_polylineStyle.lineSize = 4; //线的宽度

bus_polylineStyle.showTip = false; //不显示tip

bus_polylineStyle.lineOpacity="70";

var bus_polyline = new MPolylineOverlay([new MLatLng(BS.start_y,BS.start_x), new MLatLng(s_y[0],s_x[0])],bus_polylineStyle, "mapabcstart1");

mapObj.addOverlay(bus_polyline,false);//true 为自动调整视野 画起点与线的起点的线.(s_y[0],s_x[0]线的起点和起点)

var bus_polyline2 = new MPolylineOverlay([new MLatLng(BS.end_y,BS.end_x), new MLatLng(s_y[s_y.length-1],s_x[s_x.length-1])],bus_polylineStyle, "mapabcstart2");

mapObj.addOverlay(bus_polyline2,false);//true 为自动调整视野 画终点与线的终点的线.(s_y[s_y.length-1],s_x[s_x.length-1]线的终点和终点)

var line = new Array();

var poi_x = BS.x_c_array[num].split(",");//公交换乘的X

var poi_y = BS.y_c_array[num].split(",");//公交换乘的Y

var l = poi_x.length;

for(var e=0;e<2;e++){

line.push(new MXY(poi_x[e],poi_y[e]));

}

var bus_polyline3 = new MPolylineOverlay(line,bus_polylineStyle, "mapabcstart3");

mapObj.addOverlay(bus_polyline3,false);//true 为自动调整视野 画换乘点之间的线

if(l>2){

var line1 = new Array();

for(var e=2;e<4;e++){

line1.push(new MXY(poi_x[e],poi_y[e]));

}

var bus_polyline4 = new MPolylineOverlay(line1,bus_polylineStyle, "mapabcstart4");

mapObj.addOverlay(bus_polyline4,false);//true 为自动调整视野 画换乘点之间的线

}

var bxobj = new MStyle();

bxobj.canBeTop = false;

bxobj.showTip = false;

var bxContent = "";

bxobj.textContent = bxContent;

var bx_customPoint = new MCustomPointOverlay(new MLatLng(s_y[0],s_x[0]),"http://www.mapabc.com/qnmap/images/supermap/bx.png", bxobj, BS.start_pid+"1");

var bxobj1=new MStyle();

bxobj1.canBeTop = false;

bxobj1.showTip = false;

var bxContent1 = "";

bxobj1.textContent = bxContent1;

var bx_customPoint1 = new MCustomPointOverlay(new MLatLng(s_y[s_y.length-1],s_x[s_x.length-1]), "http://www.mapabc.com/qnmap/images/supermap/bx.png", bxobj1, BS.end_pid+"1");

var bxpoints = new Array();

bxpoints.push(bx_customPoint);

bxpoints.push(bx_customPoint1);

mapObj.drawCustomPoints(bxpoints, false);//给线的起始添加点.显示为步行.

var str ="";

if(BS.start_type=="暂无" || BS.start_type==""){}else{str = str+'<br><font color=/"#000000/">类型：'+BS.start_type+'</font>'}

if(BS.start_address=="暂无"){}else{str = str+'<br /><font color=/"#000000/">地址：'+BS.start_address+'</font>'}

if(BS.start_tel=="暂无"){}else{str = str + '<br /><font color=/"#000000/">电话：'+BS.start_tel+'</font>'}

var startObj=new MStyle();

startObj.lineColor="0x00BD 0A ";

startObj.lineOpacity="100";

startObj.lineSize="2";

startObj.fillOpacity="100";

startObj.fillColor = "0xFFFFFF";

startObj.labelColor="0xFFFFFF";

startObj.canBeTopb = true;

startObj.showTip = true;

var sContent = "<font color='#000000'><b>起点："+BS.start_name+"</b></font>";

sContent += str;

sContent += "<br /><a href=/"javascript:QN_zoom('"+BS.start_y+"','"+BS.start_x+"')/">定位放大</a>";

startObj.textContent = sContent;

var s_customPoint = new MCustomPointOverlay(new MLatLng(BS.start_y,BS.start_x),"http://www.mapabc.com/qnmap/images/supermap/qd.png", startObj, BS.start_pid);

var str1 ="";

if(BS.end_type=="" || BS.end_type=="undefined"){}else{str1 = str1+'<br><font color=/"#000000/">类型：'+BS.end_type+'</font>'}

if(BS.end_address==""||BS.end_address == "undefined"){}else{str1 = str1+'<br /><font color=/"#000000/">地址：'+BS.end_address+'</font>'}

if(BS.end_tel=="" || BS.end_tel == "undefined"){}else{str1 = str1 + '<br /><font color=/"#000000/">电话：'+BS.end_tel+'</font>'}

var endObj=new MStyle();

endObj.lineColor="0xff230b";

endObj.lineOpacity="100";

endObj.lineSize="2";

endObj.fillOpacity="100";

endObj.fillColor = "0xFFFFFF";

endObj.labelColor="0xFFFFFF";

endObj.canBeTopb = true;

endObj.showTip = true;

var eContent = "<font color='#000000'><b>终点："+BS.end_name+"</b>";

eContent += str1;

endObj.textContent = eContent;

var e_customPoint = new MCustomPointOverlay(new MLatLng(BS.end_y,BS.end_x), "http://www.mapabc.com/qnmap/images/supermap/zd.png", endObj, BS.end_pid);

var points = new Array();

points.push(s_customPoint);

points.push(e_customPoint);

mapObj.drawCustomPoints(points, false);//画起点终点.

}

//-->

</script>

</body>

</html>

关键点：

1. 在sub()方法中设置查询的起点，终点，城市

2. 首先调用busChange_Ssearch(c,s)方法进行起点查询

3. 在busChange_Ssearch(c,s)搜索的回调方法中再执行buschange_ESearch()方法中，buschange_ESearch()为终点查询。

4. 通过busChange_Ssearch()和buschange_ESearch()方法中查询得到的起点终点的XY

5. 公交线路的查询在buschange_ESearch()的回调方法busSearch_CallBack(data)中执行

6. getdistance(le)方法为将查询结果米转换成公里

7. drawBus(arrX,arrY,qdpoix,qdpoiy,zdpoix,zdpoiy,changex,changey)为公交画线方法

9. 如何进行驾车搜索

示例代码参见： 8_驾车导航.html

<!doctype html public "-//w 3c //dtd html 4.0 transitional//en">

<html>

<head>

<title>驾车导航</title>

<meta name="generator" content="editplus">

<meta name="author" content="">

<meta name="keywords" content="">

<meta name="description" content="">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<table>

<tr>

<td><span style="color:#aaa;">从</span>  北京  </td>

<td>  西单  </td>

<td><span style="color:#aaa;">到</span>  上海  </td>

<td>  徐家汇  </td>

<td><input type="button" value="查询" onclick="sub()"></td>

</tr>

</table>

<TABLE>

<TR>

<TD><div id="start_content"></div>

<div id="end_content"></div>

<div id="driveresultList"></div></TD>

<TD valign="top"> <div id="mapObj" style="width: 500px; height: 400px"></div>

</TD>

</TR>

</TABLE>

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

<script language="javascript">

<!--

function driveSearch(){

this.driveSType="rs";

this.route_way = "0";

this.point_id ="";

this.start_x = "";this.start_y = "";this.start_name = "";this.start_address = "";this.start_tel = "";this.start_pid = "";this.start_citycode = "";this.start_cityname = "";this.start_detailLink="";

this.end_x = "";this.end_y = "";this.end_name = "";this.end_address = "";this.end_tel = "";this.end_pid = "";this.end_citycode = "";

this.end_cityname = "";this.end_detailLink="";

this.route_segment;

}

var DS = new driveSearch();

function sub(){

DS.start_cityname = "北京";

DS.start_name = "西单";

DS.end_cityname = "上海";

DS.end_name = "徐家汇";

driveLine_Ssearch(DS.start_cityname,DS.start_name)

}

function driveLine_Ssearch(c,s){

sis = new MSISSearch();

sp = new MSearchPointPara();

sis.setSISCallbackFunction(driveLineSsearch_CallBack);

sp.setCitycode(c);

sp.setKeyword(s);

sp.setNumber("10");

sp.setBatch("1");

sis.searchByKeyword(sp);

}

function driveLineSsearch_CallBack(data){

if(data.message=="ok"){

if (data.count != 0) {

var resultContent = "";

for (var i = 0; i < data.poilist.length; i++) {

var poi_detaillink="";

if(data.poilist[i].srctype=="basepoi"){

poi_detaillink = "http://www.mapabc.com/detail/"+data.poilist[0].citycode+"/"+data.poilist[0].pguid+".html";

}

if(data.poilist[i].srctype=="enpoi"){

poi_detaillink = data.poilist[i].dn;

}

resultContent += "<li id=/""+DS.driveSType+"_"+i+"/">"+data.poilist[i].name+"</li>";

}

if(DS.driveSType=="rs"){

//document.getElementById('start_content').innerHTML = "<strong>起点：</strong>"+DS.start_name;

DS.start_x=data.poilist[0].x;DS.start_y=data.poilist[0].y;

DS.start_name=data.poilist[0].name;DS.start_type=data.poilist[0].type;DS.start_address=data.poilist[0].address;

}

if(DS.driveSType=="re"){

//document.getElementById('end_content').innerHTML = "<strong>终点：</strong>"+DS.end_name;

DS.end_x=data.poilist[0].x;DS.end_y=data.poilist[0].y;

DS.end_name=data.poilist[0].name;DS.end_type=data.poilist[0].type;DS.end_address=data.poilist[0].address;

}

}else{

if(DS.driveSType=="s"){document.getElementById('start_content').innerHTML = "<strong>起点：</strong>";}

if(DS.driveSType=="e"){document.getElementById('end_content').innerHTML = "<strong>终点：</strong>";}

}

driveLine_Esearch();

}

function driveLine_Esearch(){

if(DS.driveSType!="re"){

DS.driveSType = "re";

driveLine_Ssearch(DS.end_cityname,DS.end_name);

}else{

if(DS.start_x == "" || DS.start_x == "" || DS.end_x == "" || DS.end_y == ""){

alert("起点或者终点暂无结果，无法查询！请重新选择起点和终点！");

}else{

sis = new MSISSearch();

qnroute_sis = new MSearchRoutPara();

qnroute_sis.setStartXY(DS.start_x,DS.start_y);

qnroute_sis.setEndXY(DS.end_x,DS.end_y);

qnroute_sis.setCitycode(DS.cityname);

qnroute_sis.setRouteType(DS.route_way);

qnroute_sis.setType("drive");

sis.setSISCallbackFunction(driveLineSearch_CallBack);

sis.searchBusAndDrive(qnroute_sis);

}

function driveLineSearch_CallBack(data){

if(data.message == "ok"){

var route_count = data.count;//返回驾车路线(路线总数),结果是否为"0",如果是"0"无返回结果.

if(route_count==0){

document.getElementById('driveresultList').innerHTML = "<div><strong>建议：</strong><br />1.请确保所有字词拼写正确。<br />2.尝试不同的关键字。<br />3.尝试更宽泛的关键字。</div>";

}else{

var route_text = "";var road_length = 0;

var route_content = new Array();

DS.route_segment = new Array();

for(var i=0;i<route_count;i++){

DS.route_segment[i] = data.segmengList[i].coor;//每一条路线的XY

road_length += parseInt(data.segmengList[i].roadLength);//每一条路线的里程

if(i==0){

route_text += "<tr id=/"tr_"+i+"/"><td colspan=/"2/"><table border=/"0/" cellspacing=/"0/" cellpadding=/"0/"><tr><td width=/"63%/" style=/"padding-left:7px;/">"+(i+1)+"．沿<strong>"+data.segmengList[i].roadName+"</strong>向<strong>"+data.segmengList[i].direction+"</strong>行驶</td><td width=/"27%/" align=/"right/" style=/"color:#666;/">"+getdistance(data.segmengList[i].roadLength)+"</td><td width=/"10%/"> </td></tr></table></td></tr>";

}else{

route_text += "<tr id=/"tr_"+i+"/"><td colspan=/"2/"><table border=/"0/" cellspacing=/"0/" cellpadding=/"0/"><tr><td width=/"63%/" style=/"padding-left:7px;/">"+(i+1)+"．"+data.segmengList[i-1].action+"<strong>进入"+data.segmengList[i].roadName+"</strong>向<strong>"+data.segmengList[i].direction+"</strong>行驶</td><td width=/"27%/" align=/"right/" style=/"color:#666;/">"+getdistance(data.segmengList[i].roadLength)+"</td><td width=/"10%/"> </td></tr></table></td></tr>";

}

route_content.push("<strong>起点：</strong>"+DS.start_name+"<br /><strong>终点：</strong>"+DS.end_name+"<br /><div>驾车路线</div><table border=/"0/" cellspacing=/"1/" cellpadding=/"0/"><tr><td width=/"63%/" bgcolor=/"#e1e1e1/">　路线</td><td width=/"28%/" align=/"left/" bgcolor=/"#e1e1e1/">   里程</td><td width=/"10%/"> </td></tr><tr><td colspan=/"2/">  起点："+DS.start_name+"</td></tr>"+route_text+"<tr><td colspan=/"2/">  终点："+DS.end_name+"</td></tr></table>");

document.getElementById('driveresultList').innerHTML=route_content.join("");

var select_r_m = document.getElementsByName("routeModeSearch").length;

for(var i=0;i<select_r_m;i++){

if(DS.route_way==i){

document.getElementsByName("routeModeSearch")[i].checked = true;

}

var poi_xy_r = data.coors.split(",");

var arrX_r = "";//行车路线的X串

var arrY_r = "";//行车路线的Y串

for(var e=0;e<poi_xy_r.length-1;e=e+2){

if(e==poi_xy_r.length-3){

arrX_r += poi_xy_r[e];

arrY_r += poi_xy_r[e+1];

}else{

arrX_r += poi_xy_r[e]+",";

arrY_r += poi_xy_r[e+1]+",";

}

driveLineSearch_drawline(arrX_r,arrY_r,DS.start_y,DS.start_x,DS.end_y,DS.end_x);//画驾车线路

}

}else{

document.getElementById('driveresultList').innerHTML=" 异常";

}

function getdistance(le){//得到

if(le<=1000){

var s = le;

return s+"米";

}else{

var s = Math.round(le/1000);

return "约"+s+"公里";

}

function driveLineSearch_drawline(arrX,arrY,startY,startX,endY,endX){//画驾车线路

try{

mapObj.removeAllOverlays();

var startObj=new MStyle();

startObj.maxZoomLevel = "500";

var endObj=new MStyle();

endObj.maxZoomLevel = "500"

var lineObj=new MStyle();

lineObj.lineSize=6;

lineObj.lineColor=0xff230b;

lineObj.lineOpacity="90";

var startPoint = new MPointOverlay(new MLatLng(startY,startX), DS.start_name, startObj);

var endPoint = new MPointOverlay(new MLatLng(endY,endX), DS.end_name, endObj);

mapObj.drawDriveLine(arrX, arrY, startPoint, endPoint, lineObj , true);

var str ="";

if('undefined' == typeof DS.start_type){DS.start_type="";}

if('undefined' == typeof DS.start_address){DS.start_address="";}

if('undefined' == typeof DS.start_tel){DS.start_tel="";}

if(DS.start_type=="暂无" || DS.start_type==""){}else{str = str+'<font color=/"#000000/">类型：'+DS.start_type+'</font><br />'}

if(DS.start_address=="暂无" || DS.start_address==""){}else{str = str+'<font color=/"#000000/">地址：'+DS.start_address+'</font><br />'}

if(DS.start_tel=="暂无" || DS.start_tel==""){}else{str = str + '<font color=/"#000000/">电话：'+DS.start_tel+'</font>'}

var route_startObj = new MStyle();

route_startObj.lineColor="0x00BD 0A ";

route_startObj.lineOpacity="80";

route_startObj.fillColor="0xFFFFFF";

route_startObj.lineSize="2";

route_startObj.fillOpacity="100";

route_startObj.labelColor="0xFFFFFF";

//pointStyle.showTip = false;

var sContent = "<font color='#000000'><b>起点："+DS.start_name+"</b></font><br />";

sContent += str;

sContent += "<br /><a href=/"javascript:QN_zoom('"+startY+"','"+startX+"')/"><font color=/"#000000/">定位放大</font></a>";

route_startObj.textContent = sContent;

var s_customPoint = new MCustomPointOverlay(new MXY(startX,startY), "http://www.mapabc.com/qnmap/images/supermap/qd.png", route_startObj, DS.start_pid);

var str1 ="";

if('undefined' == typeof DS.end_type){DS.end_type="";}

if('undefined' == typeof DS.end_address){DS.end_address="";}

if('undefined' == typeof DS.end_tel){DS.end_tel="";}

if(DS.end_type=="暂无" || DS.end_type==""){}else{str1 = str1+'<font color=/"#000000/">类型：'+DS.end_type+'</font><br />'}

if(DS.end_address=="暂无"|| DS.end_address==""){}else{str1 = str1+'<font color=/"#000000/">地址：'+DS.end_address+'</font><br />'}

if(DS.end_tel=="暂无"|| DS.end_tel==""){}else{str1 = str1 + '<font color=/"#000000/">电话：'+DS.end_tel+'</font>'}

var route_endObj = new MStyle();

route_endObj.lineColor="0xff230b";

route_endObj.lineOpacity="80";

route_endObj.fillColor="0xFFFFFF";

route_endObj.lineSize="2";

route_endObj.fillOpacity="100";

route_endObj.labelColor="0xFFFFFF";

//pointStyle.showTip = false;

var eContent = "<font color='#000000'><b>终点："+DS.end_name+"</b></font><br />";

eContent += str1;

eContent += "<br /><a href=/"javascript:QN_zoom('"+endY+"','"+endX+"')/" style=/"color:#000000/"><font color=/"#000000/">定位放大</font>";

route_endObj.textContent = eContent;

var e_customPoint = new MCustomPointOverlay(new MXY(endX,endY), "http://www.mapabc.com/qnmap/images/supermap/zd.png", route_endObj, DS.end_pid);

var points = new Array();

points.push(s_customPoint);

points.push(e_customPoint);

mapObj.drawCustomPoints(points,false);

}catch(e){}

}

//-->

</script>

</body>

</html>

关键点：

1. 驾车搜索和公交搜索非常类似，首先我们需要进行起点的关键字搜索，通过搜索用户输入的关键字，得到起点的XY（线路搜索必须的），在起点关键字搜索的回调方法中再执行终点关键字搜索，得到终点的XY，同时在终点的回调方法中执行驾车导航的搜索方法，得到线路的XY串，然后画在地图上。

2. driveLine_Ssearch(c,s) 起点关键字搜索

3. driveLineSsearch_CallBack(data) 起点搜索的回调方法

4. driveLine_Esearch(); 终点关键字搜索

5. driveLineSearch_CallBack(data); 终点搜索的回掉方法

6. driveLineSearch_drawline(arrX_r,arrY_r,DS.start_y,DS.start_x,DS.end_y,DS.end_x);画驾车线

10. 实时交通

示例代码参见： 9_实时路况.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>实时路况</title>

</head>

<body>

<DIV id="mapObj" style="WIDTH: 500px;HEIGHT: 500px">正在加载地图...</DIV>

<SCRIPT LANGUAGE="JavaScript">

var mapOptions = new MMapOptions();

var mapObj = new MMap("mapObj", mapOptions);

function loadBeiJingTraffic(){

mapObj.setZoomAndCenter(11, new MLatLng('hrlphplnJOOE','fjtekqrposNKGE'));

mapObj.loadRealTimeTrafficButton();

}

function loadShangHaiTraffic(){

mapObj.setZoomAndCenter(11, new MLatLng('hjlijlnlnNOOI','fkoelopplrJOGE'));

mapObj.loadRealTimeTrafficButton();

}

function loadShenZhenTraffic(){

mapObj.setZoomAndCenter(11, new MLatLng('gkllljlktNOKI','fjrehmplrqJGOM'));

mapObj.loadRealTimeTrafficButton();

}

</SCRIPT>

<A HREF="javascript:loadBeiJingTraffic()">北京路况</A><br />

<A HREF="javascript:loadShangHaiTraffic()">上海路况</A><br />

<A HREF="javascript:loadShenZhenTraffic()">深圳路况</A><br />

</body>

</html>

关键点：

实时路况的实现是非常简单的，红字部分就是现实各个城市实时交通的方法

首先我们需要将地图的中心点设置为该城市的中心点mapObj.setZoomAndCenter(11, new MLatLng('hrlphplnJOOE','fjtekqrposNKGE'));

然后执行打开实时交通的方法即可mapObj.loadRealTimeTrafficButton();

如果需要关闭，再次执行mapObj.loadRealTimeTrafficButton();方法即可

11. 非MapABC数据的地图搜索实现

如果你有自己的数据，想通过MapABC Search API去查询怎么实现呢？

在查询之前你需要将自己的数据进行处理成坐标XY，有两种方式：

第一种：

联系MapABC商务人员将自己含有位置信息的数据提交给MapABC，我们的技术人员会根据将你的数据进行地址匹配，从而使一条例如：”北京市海淀区苏州街3号大恒科技大厦南座17层” 这样的信息变成坐标点XY。

第二种：

1. 第一步：登录地图编辑器http://edit.mapabc.com/loginpms.jhtml

3. 第二步：点击“创建地图”开始创建自己的地图数据

5. 第三步：保存创建的地图数据

7. 第四步：24小时之后就可以在全能地图中搜索到自己创建的地图数据

9. 通过地图编辑器标点，你的位置信息就可以通过MapABC Search API查询

数据已经准备好了，下面我们来看看怎样使用MapABC Search API查询出来：

示例代码参见： 10_使用MapABC Search API查询自己数据.html

<!DOCTYPE html PUBLIC "-//W 3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>使用Search API进行位置搜索</title>

</head>

<body>

function searchByKeyword(){

var sis = new MSISSearch();

var sp = new MSearchPointPara();

sis.setSISCallbackFunction(keywordCallBack);

sp.setRetrunType("json")//参数或为xml 设置返回数据的格式

sp.setDataSet("UP");//查询库类型,UP:编辑器;BE:基础库

sp.setCitycode("北京");

sp.setKeyword("测试");

sis.searchByKeyword(sp);

}

/**

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

</body>

</html>

关键点：

sp.setDataSet("UP")方法中的变量，查询库类型“UP”编辑器 “BE”基础库，简单的来说，就是如果你传入“UP”就会查询你自己的数据，如果传入“BE”就会查询MapABC基础数据

值得注意的地方：

有的朋友会问，我传入UP你怎么确定我的数据？其实很简单，MapABC 所有的api都会有一个KEY回合你的域名绑定。

小技巧：

在上边的代码中，细心的朋友会留意到在sp.setCitycode("北京");方法中我传入的是汉字“北京”，而不是之前传入的城市编码，其实MapABC现在已经支持中文城市名称传入了，也就是说如果你是上海的用户，你传入sp.setCitycode("上海");就可以了