实现51Map地图接口(示例代码)
更新时间：2013年11月22日 08:50:13 作者：
这篇文章主要介绍了实现51Map地图接口的示例代码。需要的朋友可以过来参考下，希望对大家有所帮助
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('标注内容')});
相关文章
本文主要介绍了js中函数的length是多少，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家介绍了Promise.race()方法功能及应用场景详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
两种JavaScript的AES加密方式（可与Java相互加解密）
这篇文章主要介绍了两种JavaScript的AES加密方式（可与Java相互加解密） 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
第一种利用ajax方式，第二种是动静创建一个script标签，配置其src属性，经过把script标签拔出到页面head来加载js，感乐趣的网友可以看下2016-04-04
理解this之前,先纠正一个观点,this 既不指向函数自身,也不指函数的词法作用域,下面这篇文章主要给大家介绍了关于JavaScript之this指向的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要为大家详细介绍了用webAPI实现图片放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
JavaScript实现的原生态Tab标签页功能【兼容IE6】
这篇文章主要介绍了JavaScript实现的原生态Tab标签页功能,可兼容IE6及谷歌等浏览器,涉及javascript事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下2017-09-09
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
本文是对js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要介绍了微信小程序实现列表的横向滑动，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
最近在看一本书：《高性能javaScript》，发现自己平时写js存在很多小细节上的问题，虽然这些问题不会导致程序运行出错，但是会导致界面加载变慢，用户体验变差，那么我们就来细细数一下应该注意的地方吧2014-02-02
最新评论