实现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进行拖拽
Jul 20 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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小偷相关截取函数备忘
2010/11/28 PHP
php构造函数实例讲解
2013/11/13 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
Dom在ajax技术中的作用说明
2010/10/25 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
js css自定义分页效果
2017/02/24 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
Python模拟登录12306的方法
2014/12/30 Python
Python内建数据结构详解
2016/02/03 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Django 前后台的数据传递的方法
2017/08/08 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
晚宴邀请函范文
2014/01/15 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
查摆剖析材料范文
2014/09/30 职场文书
导游词怎么写
2015/02/04 职场文书
当幸福来敲门观后感
2015/06/01 职场文书