实现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 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
jquery map方法使用示例
Apr 23 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python3 flask实现文件上传功能
2020/03/20 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
使用python模拟高斯分布例子
2019/12/09 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
北京银河万佳Java面试题
2012/03/21 面试题
华为C++笔试题
2014/08/05 面试题
港湾网络笔试题
2014/04/19 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
数控技校生自我鉴定
2014/03/02 职场文书
请假条范文大全
2014/04/10 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书