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

前端技术 2023/09/06 JavaScript

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

本文地址：https://www.stayed.cn/item/16836

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案