刚看了一篇帖子 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=
- 大小: 344.2 KB
分享到：
相关推荐
mapbarapi.js控制地图显示格式的js文件，通过简单程序调用这个js文件，可以按照格式显示自己想要的格式
文件名“map_marker.html”可能包含了上述代码的完整示例，它是一个简单的HTML文件，用于展示如何在网页上使用Mapbar API添加地图标注。实际应用中，你可能需要根据自己的需求调整标注的位置、样式、信息窗口内容等...
MapbarShell是一个基于Python的项目，使用WebPy框架来封装Mapbar API，目的是方便开发者通过Mapbar提供的URL接口进行自定义搜索和数据提取。Mapbar是一家提供地图服务和位置智能解决方案的公司，其API通常用于地理...
手机API让您将图吧地图嵌入您自己的应用程序中,为基于Android平台位置应用开发提供了调用接口，当前支持地图显示与操作，图层添加，兴趣点搜索，地理编码与基站定位等，从而使您创建稳定的位置应用程序。 其具有...
我们都知道，可以使用高德地图api实现经纬度与地址的转换。那么，当我们有很多个地址与经纬度，需要批量转换的时候，应该怎么办呢？ 在这里，选用高德Web服务的API，其中的地址/逆地址编码，可以实现经纬度与地址的...
5. **MapBar API**：提供地图服务、公交查询等功能。 6. **我要地图API**：支持地图显示、标注等功能。 这些接口的提供为开发者创造了良好的开发环境，使得开发者能够更加专注于应用逻辑的设计与实现。 #### 三、...
综上所述，这款在线查询网全国地图查询系统利用Asp技术和Mapbar地图服务，构建了一个高效、准确的地理信息查询平台，用户可以通过简单的交互获取全国范围内的县级地图信息。对于开发者来说，这是一个很好的学习和...
类似一个简单的新闻系统，加上一些简单的留言板等等功能，可能会添加一些Gmap API开发类的内容。 www.wikish.cn：维基上海。有了点想法和思路，但暂时由于技术能力等原因无法实现。 其他：还有两个玉米没有想好(呵呵...