实现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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
Javascript 生成指定范围数值随机数
Jan 09 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
js 作用域和变量详解
2017/02/16 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
几款好用的python工具库(小结)
2020/10/20 Python
python 写一个文件分发小程序
2020/12/05 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
NET程序员上机面试题
2015/05/23 面试题
怎么写好自荐信
2013/10/30 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
问卷调查计划书
2014/01/10 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
运动会表扬稿范文
2015/05/05 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
在python中读取和写入CSV文件详情
2022/06/28 Python