实现51Map地图接口(示例代码)


Posted in Javascript onNovember 22, 2013

51Map免费提供了地图接口以下是调用接口并且实现地理位置标注,存储,修改和回显功能。
51地图网址:http://api.51ditu.com/

在网页中引入

<script type="text/javascript" src="http://api.51ditu.com/js/maps.js"></script> 

在地图上标注:
  //地图标注
 $(document).ready(function(){
  var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);
  var map=new LTMaps("mapdiv");//地图对象
  var controlB;  //标记控件
  map.centerAndZoom("tianjin",5);//天津
  map.handleMouseScroll();//鼠标滚轮
  var controlZoom = new LTStandMapControl();//缩放控件
  map.addControl( controlZoom );
  controlB = new LTMarkControl();//添加标注控件并把事件绑定到按钮
  controlB.setVisible(false);
  document.getElementById("addPosition").onclick=function (){controlB.btnClick()};
  map.addControl( controlB );
  LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
 })

 //添加标注时执行此函数
 function getPoi(controlB){
  var poi = controlB.getMarkControlPoint();
  $("#x").val(poi.getLongitude()); //x,y为input标签id通过它传入后台储存位置
  $("#y").val(poi.getLatitude());
 }

<div id="mapdiv" style="width: 300px; height: 200px; position:static;">
        <div align="center" style="margin: 12px;">
        <a href="http://api.51ditu.com/docs/mapsapi/help.html" target="_blank"
         style="color: #D01E14; font-weight: bolder; font-size: 12px;">看不到地图请点这里</a>
        </div>
       </div>

在读图上回显标注:
 //地图回显
 $(document).ready(function(){
  map("mapdiv");
 })
 //地图
 function map(div){
  var map=new LTMaps(div);//地图对象
  var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//创建标注
   map.handleMouseScroll();//鼠标滚轮缩放
     map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐标为中心显示地图
  map.addOverLay(marker) //添加标注到地图上
 }

修改地图上的标注:
 //地图回显
 $(document).ready(function(){
  map("mapdiv");
 })
 //地图
 function map(div){
  var map=new LTMaps(div);//地图对象
  var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//创建标注
   map.handleMouseScroll();//鼠标滚轮缩放
     map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐标为中心显示地图
  map.addOverLay(marker) //添加标注到地图上
  var controlZoom = new LTStandMapControl();
  map.addControl( controlZoom );
  //添加标注控件并把事件绑定到按钮
  var controlB = new LTMarkControl();//标记控件
  controlB.setVisible(false);
  document.getElementById("addPosition").onclick=function (){map.removeOverLay( marker,true);controlB.btnClick()};
  map.addControl( controlB );
  LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
 }
 //添加标注时执行此函数
 function getPoi(controlB){
  var poi = controlB.getMarkControlPoint();
  $("#x").val(poi.getLongitude());
  $("#y").val(poi.getLatitude());
 }

其他参数设置:
可以自定义标注图标样式
var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);//创建图标对象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//创建标注
//当鼠标移动到标注上可以显示标注内容
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('标注内容')});
Javascript 相关文章推荐
javascript 选择文件夹对话框(web)
Jul 07 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
Node 自动化部署的方法
Oct 17 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 #Javascript
jquery根据name属性查找的小例子
Nov 21 #Javascript
js 走马灯简单实例
Nov 21 #Javascript
js获取客户端外网ip的简单实例
Nov 21 #Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 #Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 #Javascript
利用jq让你的div居中的好方法分享
Nov 21 #Javascript
You might like
php猜单词游戏
2015/09/29 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
Python求导数的方法
2015/05/09 Python
Python执行时间的计算方法小结
2017/03/17 Python
Python求出0~100以内的所有素数
2018/01/23 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
python统计字符的个数代码实例
2020/02/07 Python
Python如何读取、写入CSV数据
2020/07/28 Python
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
教师专业理论水平的自我评价分享
2013/11/09 职场文书
公司前台辞职报告
2014/01/19 职场文书
担保书范文
2015/01/20 职场文书
司机岗位职责
2015/02/04 职场文书
结婚通知短信大全
2015/04/17 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
教师听课学习心得体会
2016/01/15 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python