javascript+mapbar实现地图定位


Posted in Javascript onApril 09, 2010

本文地图使用的是图地图 
图吧地图在线API地址
http://union.mapbar.com/apidoc/
离线CHM格式 下载地址: 
http://union.mapbar.com/apidoc/chm/mapbarapi.rar

效果图:

javascript+mapbar实现地图定位 

Mapbar 地图 API 让您可以使用 JavaScript 将 Mapbar地图嵌入您自己的网页中。API 提供了许多方法与地图交互(正如http://www.mapbar.com/localsearch/index.html 网页上显示的),以及一系列向地图添加内容的服务,从而使您可以在自己的网站上创建稳定的地图应用程序。
公共测试密钥:

http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZZauxlDz7C7DD9ZCFGT=

如果您想试试 Mapbar 地图,省略申请密钥的步骤,可以使用公共测试密钥在本地(http://localhost)进行测试。
Internet Explorer 8.0 版本中存在兼容问题,需要在网页 <head> 标签间增加 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 标签以保证地图折线功能正确执行。
这里只有前台部分源码
你需要在你的项目中ajax来实现定位持久化
代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> 地图测试 </title> 
<script type = "text/javascript" src = "http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7..."></script> 
<script type="text/javascript"> 
var maplet=null;//地图对象 
var marker=null;//标记对象 
var le=null;//缩放级别 
var myEventListener=null;//地图click事件句柄 
function initMap()//初始化函数 
{ //转帖请注明出处 http://Qbit.cnblogs.com 
le=10; //默认缩放级别 
maplet = new Maplet("mapbar"); 
//这里可以初始化地图坐标比如从数据库中读取 然后在页面上使用小脚本的形式 
//如: maplet.centerAndZoom(new MPoint(<%=维度%>, <%=经度%>),<%=缩放级别%>); 
maplet.centerAndZoom(new MPoint(116.38672, 39.90805), le);//初始化地图中心点坐标并设定缩放级别 
maplet.addControl(new MStandardControl()); 
} 
function setp() 
{ 
if (marker)//判定是否已经添加标记 
{ 
alert("已经添加过标记了"); 
return; 
} 
maplet.setMode("bookmark");//设定为添加标记模式 
maplet.setCursorIcon("tb1.gif"); //添加鼠标跟随标签 
myEventListener = MEvent.bind(maplet, "click", this, addp); //注册click事件句柄 
} 
//这里的参数要写全即使你不使用event 
function addp(event,point){ 
if(!marker){ 
marker = new MMarker( point, //坐标 
new MIcon("mark.gif", 24, 24),//标签ICO(图片,大小) 
new MInfoWindow("蔡瑞福庄河市", "史上最佳"),//标注对象 
new MLabel("蔡瑞福")//小标签 
); 
marker.bEditable=true; 
marker.dragAnimation=true; 
maplet.addOverlay(marker);//添加标注 
marker.setEditable(true); //设定标注编辑状态 
maplet.setMode("pan"); //设定地图为拖动(正常)状态 
le= maplet.getZoomLevel(); //获取当前缩放级别 
document.getElementById("findp").style.display="block"; 
document.getElementById("delp").style.display="block"; 
document.getElementById("savep").style.display="block"; 
MEvent.removeListener(myEventListener);//注销事件 
} 
} 
//查找标记 
function find(){ 
maplet.centerAndZoom(marker.pt, le);//定位标记 
} 
//移除所有标记 
function del(){ 
//移除已经设定的坐标 
maplet.clearOverlays(true); 
location.reload(); //在重新添加的时候有点bug 我这里是直接刷新页面 来重置 
/*document.getElementById("findp").style.display="none"; 
document.getElementById("delp").style.display="none"; 
document.getElementById("savep").style.display="none"; 
maplet=null; 
marker=null; 
myEventListener=null; 
initMap();*/ 
} 
//提取标记数据 
function savep() 
{ 
alert("当前坐标点\n经度:"+marker.pt.lon+"\n维度:"+marker.pt.lat+"\n缩放级别:"+le); 
} 
</script> 
</head> 
<body onload="initMap()"> 
<table width="501"> 
<tr><td><input type="button" value="添加标注" onclick="setp()"/></td> 
<td><input type="button" id="findp" value="查看标记" style="display:none;" onclick="find()"/></td> 
<td><input type="button" id="delp" value="删除标记" style="display:none;" onclick="del()"/></td> 
<td><input type="button" id="savep" value="保存" style="display:none;" onclick="savep()"/></td> 
</tr> 
<tr><td colspan="4"><div id="mapbar" style="width:500px;height:300px"></div> 
</td></tr> 
</table> 
</body> 
</html>

源码下载地址: http://xiazai.3water.com/201004/yuanma/mapbar.rar
Javascript 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
jQuery的文档处理程序详解
May 10 Javascript
js实现漫天星星效果
Jan 19 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
vue如何判断dom的class
Apr 26 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 #Javascript
Javascript string 扩展库代码
Apr 09 #Javascript
JavaScript 设计模式之组合模式解析
Apr 09 #Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 #Javascript
基于JQuery的cookie插件
Apr 07 #Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 #Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 #Javascript
You might like
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
php jquery 多文件上传简单实例
2013/12/23 PHP
php实现源代码加密的方法
2015/07/11 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
python多重继承实例
2014/10/11 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
文明村创建实施方案
2014/03/27 职场文书
小学班主任评语大全
2014/04/23 职场文书
结对共建工作方案
2014/06/02 职场文书
选秀节目策划方案
2014/06/06 职场文书
公司员工离职证明书
2014/10/04 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript