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实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
JQuery 学习笔记 选择器之一
Jul 23 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
js利用iframe实现选项卡效果
Aug 09 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
用PHP制作静态网站的模板框架
2006/10/09 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
Python中itertools的用法详解
2020/02/07 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
幼儿园见习报告范文
2014/10/30 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android