当前位置：首页 > 资讯 > 技术文档

实现51Map地图接口(示例代码)

时间：2022-03-15 03:55 编辑：来源：阅读：
扫一扫，手机访问

摘要：实现51Map地图接口(示例代码)

51Map免费提供了地图接口以下是调用接口并且实现地理位置标注，存储,修改和回显功能。 51地图网址：[url=http://api.51ditu.com/]http://api.51ditu.com/[/url] 在网页中引入

[url=http://api.51ditu.com/docs/mapsapi/help.html] style="color: #D01E14; font-weight: bolder; font-size: 12px;">看不到地图请点这里</a> </div> </div>

在读图上回显标注：

[u]复制代码[/u][/url] 代码如下:

//地图回显 $(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) //添加标注到地图上 }

修改地图上的标注：

[u]复制代码[/u] 代码如下:

 //地图回显
 $(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());
 }

其他参数设置：可以自定义标注图标样式

[u]复制代码[/u] 代码如下:

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('标注内容')});

全部评论(0)

上一篇：JavaScript操作XML 使用百度RSS作为新闻源示例
下一篇：js的闭包的一个示例说明

资讯排行榜
更多>>