Mapbar API 简单使用

happysoul

浏览: 404178 次
性别:
来自: 天津

最近访客更多访客>>

yuhua8688

gaopengv

huanchou

qq447373051

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS+DIV
web
JavaScript

mapbar mapbar api demo 地图 mapbar地图

刚看了一篇帖子 http://www.iteye.com/topic/566712
介绍关于地图API 正好近期做的也是地图，顺便拿出来分享一下
我调研的结果没有用Google了的地图，原因是因为速度问题，显示的时间比较长，再有功能没有必要用那么多
对于地产教育商城餐厅等显示简单的功能足够了

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<title>地图标记</title>
<script type="text/javascript" src="http://union.mapbar.com/apis/maps/free?f=mapi&v=31.3&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZZauxlDz7C7DD9ZCFGT="></script>
<script type="text/javascript">
function $$(id){return document.getElementById(id);}

//静态变量
var cx=116.39087;
var cy=39.91978;
var cc="北京市";

var marker = null; 
var maplet = null;
var flag = false;

function initMap(){
	maplet = new Maplet("mapbar");
	maplet.centerAndZoom(new MPoint(cx,cy),9);
	maplet.addControl(new MStandardControl());
	maplet.clickToCenter = false;
	$$("keyword").focus();
}

window.onload=function(){
	$$("cccity").innerHTML=cc;
	$$("city").value=cc;
	document.title=cc;
	initMap();
	resizemap();
	window.onresize=function(){
		resizemap();
	}
}

//自适应窗口大小
function resizemap(){
	if(maplet){
		var xx=document.body.clientWidth;
		var yy=document.body.clientHeight-80;
		if(xx<800)xx=800;	//宽度不得小于800
		if(yy<300)yy=300;	//高度不得小于300
		maplet.resize(xx,yy);
	}
}

//点击监听
var myEventListener;
function add(){
	myEventListener = MEvent.addListener(maplet,"click",function(evt,point){
		if(flag) {maplet.clearOverlays();}

		if(!point) alert("获取经纬度失败，请刷新页面后重新操作。");
		//alert(point.lon,point.lat);
		$$("x").value = point.lon;
		$$("y").value = point.lat;

		marker = new MMarker(point,new MIcon("http://union.mapbar.com/apidoc/images/tb1.gif",32,32,18,32)); 
		maplet.addOverlay(marker); 
		marker.setEditable(false); 
		flag = true;
		dells();	//标记点后移除监听事件
	});
}

//移除监听，清空显示框
function del(){
	maplet.clearOverlays();
	dells();
	$$("x").value='';
	$$("y").value='';
}

//移除监听
function dells(){
	MEvent.removeListener(myEventListener);
}

//设置中心点
function setCenter(x,y,z){
	maplet.centerAndZoom(new MPoint(x,y), z);
}

//显示中心点
function getCenter(){
	var mPoint=maplet.getCenter();
	if($$("center")){$$("center").value=mPoint.lon+","+mPoint.lat+','+maplet.getZoomLevel();}
		else alert("中心点坐标:("+mPoint.lon+","+mPoint.lat+")"+maplet.getZoomLevel());
}

//查询mapbar
function search(){
	var city    = $$("city").value;
	var keyword = $$("keyword").value;
	if(keyword=="")keyword="故宫";
	var url = "http://www.mapbar.com/localsearch/index.jsp#ac=lc&keyword="+keyword+"&city="+city;
	var newWin = window.open(url,'newwindow');
	newWin.focus();
}


</script>
</head>
<body style="padding:0px;margin:0px;">
<div align=center >
<div style="float:left; margin-left:10px; margin-top:15px; margin-bottom:10px;">
<input type="button" value="添加" onclick="add()" style="padding:7px; ">
<input type="button" value="删除" onclick="del()" style="padding:7px; ">
</div>

<div style="float:left; height:50px; margin-left:10px; margin-top:10px; margin-bottom:10px;">
<table>
<tr><td>经度X：<input id="x" type="text" id='x'/></td></tr>
<tr><td>纬度Y：<input id="y" type="text" id='y'/></td></tr>
</table>
</div>

<div style="float:left; margin-top:20px;margin-left:10px;">
<span><a href='#' onclick='javascript:setCenter(cx,cy,8)' id="cccity"></a></span>
</div>

<div style="float:left; margin-top:15px; margin-left:5px;">
<input id="center"><br/><input type=button value='显示中心点' onclick="getCenter()">
</div>

<div style="float:left; height:50px; margin-left:5px; margin-top:10px; margin-bottom:10px;">
<table>
<form onsubmit="return false;">

<tr><td>城市：<input id="city" value=""></td><td><font color="red" size="3">外部搜索</font></td></tr>
<tr><td>查询：<input id="keyword" ></td><td><input type=submit onsubmit="return false;" value='查询mapbar' onclick="search()"></td></tr>
</form>
</table>
</div>

<div id="mapbar" style="width:382px;height:340px;float:left;"></div>
</body>
</html>

这个页面主要是用来标记点坐标，点“添加”-->然后点击地图就会返回点击位置的坐标
多余的功能是显示中心点坐标，可以在获取了新坐标后改变最上面的cx cy cc 就可以用于另一个城市了
中间的链接可以快速回到北京
因为使用的是Mapbar的api，地点查询功能属于付费项目，暂时用不到，就直接使用外部链接跳转的方式用来查找详细坐标

-------------------2011-12-21----------------------
发现api更新了以后地图无法使用，原来是key变更了...（附件中的key自己修改吧）
http://union.mapbar.com/apis/maps/free?f=mapi&v=31.3&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZZauxlDz7C7DD9ZCFGT=

北京.rar (1.8 KB)
下载次数: 134

查看图片附件

分享到：

关于checkbox选择个数限制

2010-01-18 23:23
浏览 2173
评论(0)
论坛回复 / 浏览 (0 / 3752)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论