实现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 select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
localStorage实现便签小程序
Nov 28 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
基于vue+element实现全局loading过程详解
Jul 10 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
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
通过Pandas读取大文件的实例
2018/06/07 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
医学生求职自荐信
2013/10/25 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
开学寄语大全
2014/04/08 职场文书
小学学校评估方案
2014/06/08 职场文书
财产分割协议书范本
2014/11/03 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python