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

Mapbar API 简单使用相关推荐

  1. 利用Bing翻译API简单的实现一个翻译工具

    常见的翻译服务提供商有Google和微软,它们的在线翻译地址如下: Bing翻译: http://www.microsofttranslator.com/?FORM=R5FD Google翻译: ht ...

  2. 百度地图 截图java_[Java教程]百度地图API 简单使用

    [Java教程]百度地图API 简单使用 0 2015-08-24 19:00:12 最近项目上需要用到百度地图进行导航,参考百度地图API完成一个例子.API地址:http://developer. ...

  3. libvirt 用c语言编译,基于C语言libvirt API简单小程序

    libvirt API简单小程序 1.程序代码如下 #include #include int getDomainInfo(int id) { virConnectPtr conn = NULL; v ...

  4. mysql api是什么意思_什么是mysql c api？ 解析mysql c api简单应用

    在学习数据库的时候,我们需要了解一些简单的应用,比如mysql api简单应用,喜欢的小伙伴们可以看一下.#include #include #include "mysql.h" ...

  5. ArcGis js api 简单绘制点线面

    Arcgsi js api 简单绘制点线面 <!DOCTYPE html> <html><head><meta http-equiv="Conten ...

  6. Fetch API 简单指南

    Fetch API 简单指南 什么是 Fetch API fetch api 是一个基于Promise api设计的 xmlHttpRequest 的升级替代品,用于通过javascript发起异步请 ...

  7. java flux api,JAVA Reactor API 简单使用(Flux和Mono)及WebFlux的应用

    一. Reactor API 简单使用(Flux和Mono) 1. 常用创建Flux及Mono的方式 1.1. 使用just从现有的已知内容和大小的数据创建Flux或Mono //使用数组创建一个被观 ...

  8. jira以及jira API简单介绍

    最近需要预言:是否可以通过jira API实现用例管理,对jira的应用.API.扩展等进行了一定的了解. Jira介绍: jira是目前比较流行的基于Java架构的管理系统(Atlassian公司支 ...

  9. Web API 简单示例

    一.RESTful和Web API Representational State Transfer (REST) is a software architecture style consisting ...

最新文章

  1. 人工智能之算法知识与实战篇
  2. jmeter用户自定义变量的实际使用
  3. oralce 角色 权限
  4. 云炬WEB开发笔记2-7 代理神器CharlesFiddler
  5. python的mag模块_Python全栈-magedu-2018-笔记22
  6. Debian Gnu/Linux 9关闭 111端口
  7. 贪心算法-区间选点问题-种树
  8. 不同语言实现两个变量的交换 Python之禅
  9. 【三维路径规划】基于matlab改进的粒子滤波无人机三维航迹规划【含Matlab源码 1527期】
  10. fortran 教程
  11. java 企业微信对接_Java对接企业微信
  12. 90后游戏开发大神毛星云跳楼自杀！8年执着国产3A梦碎
  13. ai俄罗斯方块java_俄罗斯方块 AI 算法讲解
  14. vue3 + ts + EsLint + Prettier 规范代码
  15. 阿里 卫哲谈阿里人力招聘价值观
  16. MySQL数据库如何备份、恢复、导出与导入
  17. 十分钟学习nfs服务器
  18. 如何用Excel做一个战斗模拟器(三)战斗过程模拟
  19. 智能语音语义时代，产品经理怎么让AI更聪明？（效果向）
  20. 学会这4招，轻松解决开关电源EMI

热门文章

  1. React Native 0.60以上集成code push热更新
  2. 图像压缩小波变换原理
  3. 一致性算法之paxos(帕克索斯)算法
  4. C# 图书管理系统（MySQL）——属性设计（三）
  5. 【蓝桥杯选拔赛真题28】python字符串包含字符 青少年组蓝桥杯python 选拔赛STEMA比赛真题解析
  6. 蓝桥杯：分糖果 JAVA
  7. 对扩展欧几里得定理理解+证明
  8. Linux-常用文件夹及目录作用
  9. Winform自定义控件 —— 指示灯
  10. TF卡有写保护放在小方摄像头中不识别