Mapbar API 简单使用

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量1.6k 收藏 2
点赞数
文章标签： api function float button input javascript

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

Html代码 复制代码
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  4. <title>地图标记</title>  
  5. <script type="text/javascript" src="http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZZauxlDz7C7DD9ZCFGT="></script>  
  6. <script type="text/javascript">  
  7. function $$(id){return document.getElementById(id);}   
  8.   
  9. //静态变量   
  10. var cx=116.39087;   
  11. var cy=39.91978;   
  12. var cc="北京市";   
  13.   
  14. var marker = null;    
  15. var maplet = null;   
  16. var flag = false;   
  17.   
  18. function initMap(){   
  19.     maplet = new Maplet("mapbar");   
  20.     maplet.centerAndZoom(new MPoint(cx,cy),9);   
  21.     maplet.addControl(new MStandardControl());   
  22.     maplet.clickToCenter = false;   
  23.     document.getElementById("keyword").focus();   
  24. }   
  25.   
  26. window.onload=function(){   
  27.     $$("cccity").innerHTML=cc;   
  28.     $$("city").value=cc;   
  29.     document.title=cc;   
  30.     initMap();   
  31.     resizemap();   
  32.     window.onresize=function(){   
  33.         resizemap();   
  34.     }   
  35. }   
  36.   
  37.   
  38. function resizemap(){   
  39.     if(maplet){   
  40.         var xx=document.body.clientWidth;   
  41.         var yy=document.body.clientHeight-80;   
  42.         if(xx<800)xx=800;   
  43.         if(yy<300)yy=300;   
  44.         maplet.resize(xx,yy);   
  45.     }   
  46. }   
  47.   
  48. var myEventListener;   
  49. function add(){   
  50.     myEventListener = MEvent.addListener(maplet,"click",function(evt,point){   
  51.         if(flag) {maplet.clearOverlays();}   
  52.   
  53.         if(!point) alert("获取经纬度失败，请刷新页面后重新操作。");   
  54.         //alert(point.lon,point.lat);   
  55.         document.getElementById("x").value = point.lon;   
  56.         document.getElementById("y").value = point.lat;   
  57.   
  58.         marker = new MMarker(point,new MIcon("http://union.mapbar.com/apidoc/images/tb1.gif",32,32,18,32));    
  59.         maplet.addOverlay(marker);    
  60.         marker.setEditable(false);    
  61.         flag = true;   
  62.         dells();   
  63.     });   
  64. }   
  65.   
  66. function del(){   
  67.     maplet.clearOverlays();   
  68.     dells();   
  69.     document.getElementById("x").value='';   
  70.     document.getElementById("y").value='';   
  71. }   
  72.   
  73. function dells(){   
  74.     MEvent.removeListener(myEventListener);   
  75. }   
  76.   
  77. //设置中心点   
  78. function setCenter(x,y,z){   
  79.     maplet.centerAndZoom(new MPoint(x,y), z);   
  80. }   
  81.   
  82. //显示中心点   
  83. function getCenter(){   
  84.     var mPoint=maplet.getCenter();   
  85.     if(document.getElementById("center")){document.getElementById("center").value=mPoint.lon+","+mPoint.lat+','+maplet.getZoomLevel();}   
  86.         else alert("中心点坐标:("+mPoint.lon+","+mPoint.lat+")"+maplet.getZoomLevel());   
  87. }   
  88.   
  89. //查询mapbar   
  90. function search(){   
  91.     var city    = document.getElementById("city").value;   
  92.     var keyword = document.getElementById("keyword").value;   
  93.     if(keyword=="")keyword="中裕商务花园";   
  94.     var url = "http://www.mapbar.com/localsearch/index.jsp#ac=lc&keyword="+keyword+"&city="+city;   
  95.     var newWin = window.open(url,'newwindow');   
  96.     newWin.focus();   
  97. }   
  98.   
  99.   
  100. </script>  
  101. </head>  
  102. <body style="padding:0px;margin:0px;">  
  103. <div align=center >  
  104. <div style="float:left; margin-left:10px; margin-top:15px; margin-bottom:10px;">  
  105. <input type="button" value="添加" onclick="add()" style="padding:7px; ">  
  106. <input type="button" value="删除" onclick="del()" style="padding:7px; ">  
  107. </div>  
  108.   
  109. <div style="float:left; height:50px; margin-left:10px; margin-top:10px; margin-bottom:10px;">  
  110. <table>  
  111. <tr><td>经度X：<input id="x" type="text" id='x'/></td></tr>  
  112. <tr><td>纬度Y：<input id="y" type="text" id='y'/></td></tr>  
  113. </table>  
  114. </div>  
  115.   
  116. <div style="float:left; margin-top:20px;margin-left:10px;">  
  117. <span><a href='#' onclick='javascript:setCenter(cx,cy,8)' id="cccity"></a></span>  
  118. </div>  
  119.   
  120. <div style="float:left; margin-top:15px; margin-left:5px;">  
  121. <input id="center"><br/><input type=button value='显示中心点' onclick="getCenter()">  
  122. </div>  
  123.   
  124. <div style="float:left; height:50px; margin-left:5px; margin-top:10px; margin-bottom:10px;">  
  125. <table>  
  126. <form onsubmit="return false;">  
  127.   
  128. <tr><td>城市：<input id="city" value=""></td><td><font color="red" size="3">外部搜索</font></td></tr>  
  129. <tr><td>查询：<input id="keyword" ></td><td><input type=submit onsubmit="return false;" value='查询mapbar' onclick="search()"></td></tr>  
  130. </form>  
  131. </table>  
  132. </div>  
  133.   
  134. <div id="mapbar" style="width:382px;height:340px;float:left;"></div>  
  135. </body>  
  136. </html>  
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>地图标记</title>
<script type="text/javascript" src="http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&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;
	document.getElementById("keyword").focus();
}

window.οnlοad=function(){
	$$("cccity").innerHTML=cc;
	$$("city").value=cc;
	document.title=cc;
	initMap();
	resizemap();
	window.οnresize=function(){
		resizemap();
	}
}


function resizemap(){
	if(maplet){
		var xx=document.body.clientWidth;
		var yy=document.body.clientHeight-80;
		if(xx<800)xx=800;
		if(yy<300)yy=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);
		document.getElementById("x").value = point.lon;
		document.getElementById("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();
	document.getElementById("x").value='';
	document.getElementById("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(document.getElementById("center")){document.getElementById("center").value=mPoint.lon+","+mPoint.lat+','+maplet.getZoomLevel();}
		else alert("中心点坐标:("+mPoint.lon+","+mPoint.lat+")"+maplet.getZoomLevel());
}

//查询mapbar
function search(){
	var city    = document.getElementById("city").value;
	var keyword = document.getElementById("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="添加" οnclick="add()" style="padding:7px; ">
<input type="button" value="删除" οnclick="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='#' οnclick='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='显示中心点' οnclick="getCenter()">
</div>

<div style="float:left; height:50px; margin-left:5px; margin-top:10px; margin-bottom:10px;">
<table>
<form οnsubmit="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 οnsubmit="return false;" value='查询mapbar' οnclick="search()"></td></tr>
</form>
</table>
</div>

<div id="mapbar" style="width:382px;height:340px;float:left;"></div>
</body>
</html>



这个页面主要是用来标记点坐标，点“添加”-->然后点击地图就会返回点击位置的坐标
多余的功能是显示中心点坐标，可以在获取了新坐标后改变最上面的cx cy cc 就可以用于另一个城市了
中间的链接可以快速回到北京
因为使用的是Mapbar的api，地点查询功能属于付费项目，暂时用不到，就直接使用外部链接跳转的方式用来查找详细坐标


  • 大小: 344.2 KB
ahai123123
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Mapbar 地图 API 实例
图吧小鱼儿
10-25 1419
下面给出了 Mapbar 地图 API 文档集中包含的所有示例，作为快速参考。 简单的地图 地图标注 地图动画 地图模式 自定义鼠标样式 新！ 地图四个顶点 新！ 简单事件 事件上下文 事件闭包 事件参数 事件绑定 事件删除 单击获取经纬度 新！ 平移/缩放控件 比例尺控件 缩略图控件 信息窗口 信息窗口选项卡 新！ 标注各
MapBar的Api使用简略说明（下）
幻想樂章
11-25 319
    事件： MEvent类 最重要最常用的一段事件代码： MEvent.addListener(maplet, "click", function() { alert("您点击了地图。"); })  三个参数分别是将事件注册给哪个元素，注册的什么时间，事件发生做什么。第三个参数是个回调函数。但是要注意到是第二个参数是mapbar自定义的事件，一般是常用的事件去掉on，可以参看类...
Mapbar 地图 API 概念   技术文档
weixin_34309543的博客
10-25 342
Mapbar 地图 API 概念 欢迎阅读 Mapbar 地图 API 的开发人员文档！Mapbar 地图 API 允许您在网页中嵌入Mapbar 地图 。要使用该 API，您需要先注册 API 密钥。收到 API 密钥之后，即可以按照本文档中的说明开发地图应用程序。 Mapbar 地图 API 实例 下面给出了 Mapbar 地图 API 文档集中包含的所有示例...
国内值得关注的官方API集合
a1405的专栏
02-28 1885
第一笔记 为知笔记(http://www.wiz.cn/manual/plugin/)- 为知笔记Windows客户端开放了大量的API，其中绝大部分，都通过COM提供，可以在javascript, C#, C++, Delphi等语言中使用。接口通过IDL(Interface description language)语言描述。 印象笔记(https://dev.yinxiang.com...
Vue+高德地图api
qq_42155347的博客
05-11 2388
Vue+高德地图api
高德api java_坐标转换-API文档-开发指南-Web服务 API | 高德地图API
weixin_29193359的博客
02-12 425
产品介绍坐标转换是一类简单的HTTP接口，能够将用户输入的非高德坐标(GPS坐标、mapbar坐标、baidu坐标)转换成高德坐标。使用前您需先申请Key。若无高德地图API账号需要先申请账号。适用场景为了使用高德服务，用户需要将非高德坐标转换为高德坐标。使用限制服务调用量的限制请点击这里查阅。使用说明第一步，申请”Web服务API”密钥(Key)；第二步，拼接HTTP请求URL，第一步申请的Ke...
【Python】基于高德地图API的定位坐标转换函数
网易独家音乐人Mike Zhou的博客
01-08 1334
【Python】基于高德地图API的定位坐标转换函数
Google Maps API离线开发包
如果明天过后
08-05 910
怎么会去搞一个离线调试包呢，为什么不直接在线调试呢？其实，主要是因为我用了大半年的免费无线被加密了，从此我就开始了我的断网生活，但又想搞点 Google Maps API玩玩，没有网络就不能使用Google Maps API开发了吗？就不能本地脱机离线调试吗？我不甘心。于是就产生了这个离线调试代码包，其实简单的来说，就是将Google Maps API封装的那些JS下载到本地，然后就可以在离线
简单使用百度MAPAPI进行操作
在等一个可能
10-27 1380
使用百度MAPAPI做的一些简单操作：创建地图，启用滚轮放大缩小，启用键盘操作，添加鱼骨，创建信息窗口对象，创建标注，获取标注坐标，如果已保存坐标，初始化创建标注，通过AjaxPro保存坐标（方法略）。下面是简单代码
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 732
注释很详细，直接上代码……
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 618
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 443
处理vite项目中src和url路径问题
RN高级interview
流星雨的博客
07-31 508
RN高级interview
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2773
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
linux命令行下使用的浏览器
没刮胡子的程序员专栏
08-01 99
从命令行浏览网页的原因有很多。 命令行工具通常具有丰富的选项和参数，可以根据用户的需求进行调整和配置。这种灵活性使得命令行在自动化和脚本编写方面非常有用。 对于系统管理员来说，命令行是管理和配置服务器的首选方式。通过命令行，管理员可以快速执行各种任务，例如安装软件包、配置网络、管理用户和权限等。与图形界面相比，命令行通常更高效，特别是在处理大量的重复性任务时。 使用Linux命令行浏览器可以提高工作效率，降低系统资源消耗，提高系统的稳定性。
vue3学习day01-vue3的优势、新的脚手架工具create-vue、创建vue3项目、vue3的项目文件内容、插件变化
2301_76648183的博客
07-31 483
（4）index.html 单页入口，提供id为app的挂载点。
Pinia和vueX的区别是什么，刷新数据丢失怎么处理？
ggq53219的博客
08-01 467
Pinia和Vuex都是Vue.js生态系统中的状态管理库，它们在设计理念、使用方式、性能以及生态系统支持等方面存在一些差异。以下是对Pinia和Vuex主要区别的详细分析，以及处理数据刷新丢失问题的建议。
elementUI，vue，前端判断时间是否有交集(重合)方法
peepeeman的博客
08-01 388
前端根据24小时制，判断所选时间是否存在重复情况
高德地图纠偏API调用实例
03-30
以下是一个使用高德地图纠偏API的调用实例： 假设我们有一组GPS坐标数据，经度为120.123456，纬度为31.654321。这些坐标数据是从一台设备上收集到的，但是由于设备误差等原因，这些坐标数据可能存在偏差。我们希望...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值