<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>加载地图示例</title>
<script type="text/javascript" src="http://app.mapabc.com/apis?&t=ajaxmap&v=2.1.2&key=208579e378ea73eb791a6cc139f92ef9a3b5dc4d36ba973b05d9b79380f3765f4887c6cbefc3a1b2"></script>
<script type="text/javascript">
var mapObj;
function mapInit() {
var mapOptions = new MMapOptions();//构建地图辅助类
mapOptions.zoom=13;//设置地图zoom级别
mapOptions.center=new MLngLat(116.397428,39.90923); //设置地图中心点
mapOptions.toolbar = DEFAULT;//工具条
mapOptions.toolbarPos = new MPoint(15,15); //工具条
mapOptions.overviewMap = SHOW;//是否显示鹰眼
mapOptions.scale = SHOW;//是否显示比例尺
mapOptions.returnCoordType = COORD_TYPE_OFFSET;//返回数字坐标
mapOptions.zoomBox = true;//鼠标滚轮缩放和双击放大时是否有红框动画效果。
mapObj=new MMap("iCenter",mapOptions); //地图初始
keywordSearch();
}
function keywordSearch(){
var keywords = "家乐福";
var city = "苏州";
var MSearch = new MPoiSearch();
var opt = new MPoiSearchOptions();
opt.recordsPerPage = 10;//每页返回数据量,默认为10
opt.pageNum = 1;//当前页数。
opt.dataType = "";//数据类别,该处为分词查询,只需要相关行业关键字即可
opt.dataSources = DS_BASE_ENPOI;//数据源,基础+企业地标数据库(默认)
MSearch.setCallbackFunction(keywordSearch_CallBack);
MSearch.poiSearchByKeywords(keywords,city,opt);
}
function keywordSearch_CallBack(data){
var resultStr="";
if(data.error_message != null){
resultStr="查询异常!"+data.error_message;
}else{
switch(data.message){
case 'ok':
var marker = new Array();
if(data.poilist.length==0){
resultStr = "未查找到任何结果!<br />建议:<br />1.请确保所有字词拼写正确。<br />2.尝试不同的关键字。<br />3.尝试更宽泛的关键字。";
}else{
resultCount=data.poilist.length;
for (var i = 0; i < data.poilist.length; i++) {
resultStr += "<div id='divid"+(i+1)+"' onmouseover='openMarkerTipById1("+(i+1)+",this)' onmouseout='onmouseout_MarkerStyle("+(i+1)+",this)' style=\"font-size: 13px;cursor:pointer;padding:2px 0 10px 5px;\">"+(i+1)+"、"+data.poilist[i].name+"<br \/>";
resultStr += TipContents(data.poilist[i].type,data.poilist[i].address,data.poilist[i].tel);
resultStr += "<br />城市:"+data.poilist[i].citycode + "<br \/></div>";
var markerOption = new MMarkerOptions();
markerOption.imageUrl ="http://code.mapabc.com/images/lan_1.png";
var tipOption = new MTipOptions();
tipOption.title=(i+1) + ". "+ data.poilist[i].name;
var tipC = "<br />"+TipContents(data.poilist[i].type,data.poilist[i].address,data.poilist[i].tel);
tipOption.content=tipC;//tip内容
tipOption.borderStyle.thickness=2;
tipOption.borderStyle.color= 0x005cb5;
tipOption.borderStyle.alpha=1;
tipOption.titleFontStyle.name="Arial";
tipOption.titleFontStyle.size=12;
tipOption.titleFontStyle.color= 0xffffff;
tipOption.titleFontStyle.bold=true;
tipOption.contentFontStyle.name="Arial";
tipOption.contentFontStyle.size=13;
tipOption.contentFontStyle.color= 0x000000 ;
tipOption.contentFontStyle.bold=false;
tipOption.fillStyle.color= 0xFFFFFF; //填充色
tipOption.fillStyle.alpha=1;
tipOption.titleFillStyle.color=0x005cb5;
tipOption.titleFillStyle.alpha=1;
markerOption.tipOption = tipOption;
markerOption.canShowTip=true;
var mar = new MMarker(new MLngLat(data.poilist[i].x,data.poilist[i].y),markerOption);
mar.id=(i+1);
marker.push(mar);
}
mapObj.addOverlays(marker,true);
mapObj.addEventListener(mapObj,TIP_OPEN,openTip);
}
break;
case 'error':
resultStr= "<div class=\"default\"><div class=\"default_title\">网络忙!请重新尝试!</div><div class=\"d_link\"><div class=\"d_right\"></div><div class=\"suggest\"><strong>建议:</strong><br />如果您刷新页后仍无法显示结果,请过几分钟后再次尝试或者与我们的服务人员联系。<br />Email:service@mapabc.com <br />电话:400 810 0080</div></div></span>错误信息:"+data.message+"</div>";
break;
default:
resultStr= "<div class=\"default\"><div class=\"default_title\">对不起!网络繁忙!请稍后重新尝试!</div><div class=\"d_link\"><div class=\"d_right\"></div><div class=\"suggest\"><strong>建议:</strong><br />如果您刷新页后仍无法显示结果,请过几分钟后再次尝试或者与我们的服务人员联系。<br />Email:service@mapabc.com <br />电话:400 810 0080</div></div></span>错误信息:"+data.message+"</div>";
}
}
document.getElementById("result").innerHTML = resultStr;
}
function TipContents(type,address,tel){
if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
type = "暂无";
}
if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
address = "暂无";
}
if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
tel = "暂无";
}
var str ="地址:" + address + "<br>电话:" + tel + " <br>类型:"+type;
return str;
}
function openMarkerTipById1(pointid,thiss){ //根据id打开搜索结果点tip
thiss.style.background='#CFD6E8';
mapObj.openOverlayTip(pointid);
}
function onmouseout_MarkerStyle(pointid,thiss) {//鼠标移开后点样式恢复
thiss.style.background="";
}
function openTip(param){
var n = "divid"+(param.overlayId);
for (var i = 1; i <= resultCount; ++i){
var id="divid"+i;
document.getElementById(id).style.background='';
document.getElementById(id).onmouseout = function(){this.style.backgroundColor='';};
}
document.getElementById(n).style.background='#CFD6E8';
document.getElementById(n).onmouseout = function(){this.style.backgroundColor='#CFD6E8';};
}
</script>
</head>
<body onload="mapInit();">
<div style="width:500px; height:500px;">
<div id="iCenter" style="width:500px; height:500px;"></div>
</div>
<div id="result" style="width:500px; height:500px;"></div>
</body>
</html>
分享到:
相关推荐
MapABC Flex API 示例代码用户手册开发包是一份珍贵的学习资源,专门为那些想要深入理解并使用MapABC Flex API的开发者设计。MapABC是一家提供地图服务的公司,其Flex API是用于在网页应用中集成动态地图功能的开发...
MapABC_API_JavaScript是专为开发者设计的一个工具集,它包含了MapABC地图服务的JavaScript版本的所有API,便于在Web应用程序中集成地图功能。这个API提供了丰富的地图操作和功能,帮助开发者轻松创建交互式地图应用...
MapABC的使用示例中,展示了如何通过简单的JavaScript代码在网页上创建一个地图。首先引入MapABC的JavaScript库,然后定义地图容器,设置地图选项(如地图ID、初始缩放级别、中心点坐标),最后创建MMap对象来实例化...
五、示例程序和图片资源 "演示程序.html"可能是包含MapABC API应用实例的网页,供开发者参考学习。"images"目录则包含了与地图相关的图像资源,如图标、标记图片等,开发者可以在自己的应用中使用这些资源来丰富...
至于SDK文件,它通常包含MapABC API的库文件、示例代码、文档以及可能的调试工具。开发者需要将这些库文件引用到项目中,然后就可以使用API提供的各种功能。示例代码可以帮助快速理解和学习如何使用API,而文档则...
通过MapABC地图API_介绍.pptx这个幻灯片,开发者可以深入了解API的详细用法,包括如何注册、获取API密钥、调用示例代码以及常见问题解答等。学习并掌握这些内容,将有助于开发出更具创新性的地图应用,满足不同场景...
MapABC Flex4 Demo是一个基于Adobe Flex4框架开发的地图应用程序示例。Flex4是ActionScript 3.0的一个强大的富互联网应用程序(RIA)框架,它允许开发者创建具有高度交互性和动态视觉效果的Web应用程序。在MapABC ...
MapABC Flex API 2.4 是一款用于在Adobe Flex环境...MapABC Flex API 2.4 提供了丰富的示例和文档,是学习和实践地图开发的好资源。通过深入研究并实践,你将能够利用这个API创建出功能强大、用户体验优秀的地图应用。
MAPABC可能提供了自己的地图API,允许开发者在网站或应用中嵌入地图功能。API通常包括JavaScript库,开发者可以通过调用特定的函数来获取地图数据、绘制标记、设定视图范围等。比如,testCustom.html可能展示了如何...
这个PDF文档很可能是MapABC SilverLight API的官方用户手册,详细介绍了API的各个接口、参数和示例代码,是开发者学习和使用API的重要参考资料。通常,手册会包含安装指南、API参考、示例代码和故障排除等内容,...
9. **示例代码和文档**:为了帮助开发者更好地理解和使用MapABC Silverlight API,通常会提供详细的开发文档和示例代码。例如,`Mapabc.SilverLight.API.dll`可能是包含API实现的库文件,开发者需要引用这个库才能在...
这个示例创建了一个基本的MapABC地图,设置ID为"fmptest",缩放级别为10,中心点位于北京。 总的来说,MapABC电子地图应用不仅提供了丰富的地图服务,还通过API开放了地图功能,使得开发者能够构建个性化的地图应用...
##### 示例密钥: ``` 9acb8aee42aed9d78e7c437571341f6b0969526416240c56f1ce70b2167448420e59c9f0beaded4e ``` - **绑定URL**:需要为账户设置可以使用的域名(URL),例如`http://localhost:8080/flashmap/`,该...
10. **开发者工具与文档**:MapABC为开发者提供了详细的API文档和示例代码,帮助开发者快速集成地图服务,解决开发过程中遇到的问题。 在实际应用中,开发者通常需要结合后端服务和前端界面,通过MapABC的SDK或API...
10. **示例与教程**:提供的Googlemap_API教程.doc可能是关于如何使用MapABC API的指南,包含了基本示例和进阶教程,帮助开发者快速入门。 在实际开发中,开发者通常会结合MapABC Flex API V2.3.2的文档和示例代码...
Flex开发地图程序 小示例 可以缩放地图 取得经纬度点 设置显示的地图中心
在IT行业中,地图服务是地理信息系统(GIS)的重要组成部分,为用户提供直观的地理位置信息展示。Mapabc是一款国内知名的在线...在实际操作中,可参考Mapabc提供的官方文档和示例代码,以确保正确无误地实现所需功能。