Mapbar API 简单使用

最新推荐文章于 2012-12-02 02:58:38 发布

firseve

最新推荐文章于 2012-12-02 02:58:38 发布

阅读量515

点赞数

分类专栏： CSS+DIV web JavaScript 文章标签： mapbar mapbar api demo 地图 mapbar地图

本文链接：https://blog.csdn.net/firseve/article/details/83531025

版权

JavaScript 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

web

4 篇文章 0 订阅

订阅专栏

CSS+DIV

2 篇文章 0 订阅

订阅专栏

刚看了一篇帖子 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，地点查询功能属于付费项目，暂时用不到，就直接使用外部链接跳转的方式用来查找详细坐标

[img]http://dl.iteye.com/upload/attachment/195293/6ab65ff4-484d-3be8-8698-6ae32592c0f8.png[/img]

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

firseve

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Mapbar API 简单使用

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

扫一扫

专栏目录