浏览 3750 次
|
锁定老帖子 主题：Mapbar API 简单使用
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-01-18
刚看了一篇帖子 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=utf-8"/>
<title>地图标记</title>
<script type="text/javascript" src="http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&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;
document.getElementById("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;
if(yy<300)yy=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);
document.getElementById("x").value = point.lon;
document.getElementById("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();
document.getElementById("x").value='';
document.getElementById("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(document.getElementById("center")){document.getElementById("center").value=mPoint.lon+","+mPoint.lat+','+maplet.getZoomLevel();}
else alert("中心点坐标:("+mPoint.lon+","+mPoint.lat+")"+maplet.getZoomLevel());
}
//查询mapbar
function search(){
var city = document.getElementById("city").value;
var keyword = document.getElementById("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，地点查询功能属于付费项目，暂时用不到，就直接使用外部链接跳转的方式用来查找详细坐标 
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
