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

最新推荐文章于 2024-07-09 14:42:34 发布

mapfans2008

最新推荐文章于 2024-07-09 14:42:34 发布

阅读量6.8k

点赞数

文章标签： api javascript function html callback xhtml

本文链接：https://blog.csdn.net/mapfans2008/article/details/3584313

版权

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

摘要由CSDN通过智能技术生成

[前言：]

     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(){

最低0.47元/天解锁文章

mapfans2008

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
手把手的教你用MapABC的地图API制作自己的免费地图

[前言：] 2008年2月，中国知名地图服务商MapABC（www.mapabc.com ）发布免费API(地图通用接口)，这个接口一经发布后，得到了大量中小网站的热烈欢迎和响应。截止到2008年11月，已有超过15000家网站申请获得了免费API的key, 同时他们中的大多数也都陆续利用API开发生成了自己的免费地图。那么什么是MapABC API呢？简单来说 MapABC
复制链接

扫一扫