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 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
js实现3d悬浮效果
Feb 16 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
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
Linux中为php配置伪静态
2014/12/17 PHP
详谈PHP编码转换问题
2015/07/28 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
vuex实现及简略解析(小结)
2019/03/01 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
javascript实现文字跑马灯效果
2020/06/18 Javascript
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python实现图像的垂直投影示例
2020/01/17 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
python re模块常见用法例举
2021/03/01 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
上班睡觉检讨书
2014/01/09 职场文书
学校联谊协议书
2014/09/16 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
四年级作文之植物
2019/09/20 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL