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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
js left,right,mid函数
Jun 10 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
es6函数之rest参数用法实例分析
Apr 18 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 str_replace的替换漏洞
2008/03/15 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
php中错误处理操作实例分析
2019/08/23 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
Python 数据处理库 pandas进阶教程
2018/04/21 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
python字典排序的方法
2019/10/12 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
商务助理岗位职责
2013/11/13 职场文书
六年级数学教学反思
2014/02/03 职场文书
房地产推广策划方案
2014/05/19 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
python热力图实现的完整实例
2022/06/25 Python