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

(0)

相关推荐

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

    51Map免费提供了地图接口以下是调用接口并且实现地理位置标注,存储,修改和回显功能. 51地图网址:http://api.51ditu.com/ 在网页中引入 复制代码 代码如下: <script type="text/javascript" src="http://api.51ditu.com/js/maps.js"></script> 在地图上标注: 复制代码 代码如下: //地图标注 $(document).ready(functio

  • 使用D3.js创建物流地图的示例代码

    本文介绍了使用D3.js创建物流地图的示例代码,分享给大家,具体如下: 示例图 制作思路 需要绘制一张中国地图,做为背景. 需要主要城市的经纬坐标,以绘制路张起点和终点. 接收到物流单的城市,绘制一个闪烁的标记. 已经有过物流单的目标城市,不再绘制路线. 每次新产生一笔物流单,都有一个标记沿路线移向目标的动画效果. 绘制结束后的数据,需要清理掉,以减少对浏览器的资源占用. 开始撸码 1.创建网页模板 加载D3JS,为了方便调试,直接下载d3.js文件在本地,实际使用的时候,可以换成加载路径.注意

  • vue+echarts5实现中国地图的示例代码

    使用echarts5.0版本实现中国地图,E charts在5.0版本之后,地图不能直接引入了,需要自己去下载. 地图文件下载地址:下载地址(http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5) 注意: 将下载后的json文件放置/public目录下 map类型的地图 <template> <

  • Spring Aware接口示例代码详解

    若 Spring 检测到 bean 实现了 Aware 接口,则会为其注入相应的依赖.所以通过让bean 实现 Aware 接口,则能在 bean 中获得相应的 Spring 容器资源. Spring 中提供的 Aware 接口有: BeanNameAware:注入当前 bean 对应 beanName BeanClassLoaderAware:注入加载当前 bean 的 ClassLoader BeanFactoryAware:注入 当前BeanFactory容器 的引用 BeanNameAw

  • 利用C++实现双链表基本接口示例代码

    链表 链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的.链表由一系列结点(链表中每一个元素称为结点)组成,结点可以在运行时动态生成.每个结点包括两个部分:一个是存储数据元素的数据域,另一个是存储下一个结点地址的指针域. 相比于线性表顺序结构,链表比较方便插入和删除操作. 本文主要给大家介绍了关于C++实现双链表基本接口的相关内容,分享出来供大家参考学习,话不多说,来一起看看详细的介绍吧. 首先先简单通过图示区分单链表和双链表的结构差异: 单链表

  • React 使用recharts实现散点地图的示例代码

    一.前端框架react+ant design UI 二.首先安装recharts npm install recharts 或者 yarn add recharts 三.引入插件及chinaJSON.js(里面有经纬度信息) 由于项目需要我是全部存数据库的,因为也需要自己添加,下面附一份儿全国省市县经纬度数据 chinaJSON.js_jb51.rar import React,{Component} from 'react'; import {message} from 'antd'; imp

  • Spring的BeanFactoryPostProcessor接口示例代码详解

    接口简介 BeanFactoryPostProcessor 接口是 Spring 初始化 BeanFactory 时对外暴露的扩展点,Spring IoC 容器允许 BeanFactoryPostProcessor 在容器实例化任何 bean 之前读取 bean 的定义,并可以修改它. BeanDefinitionRegistryPostProcessor 继承自 BeanFactoryPostProcessor,比 BeanFactoryPostProcessor 具有更高的优先级,主要用来在

  • Vue echarts 实现离线中国地图的示例代码(细化到省份)

    目录 一.效果 二.完整代码 三.一些配置说明 1. 颜色配置 2. 省份点击事件 四.关于地图中的 china.js 细节修改 Vue echarts 实现离线中国地图,细化到省份 更新于 2022/09/22 找了好几个,没一个靠谱的,不是少了 china.js 就是其它原因不能运行. 一.效果 二.完整代码 展示这个地图只需要 Vue 环境中 已安装好 echarts china.js(在下面) 这个地图的 vue 源文件(在下面) 关于一些修改说明放到了第三条,如果你需要修改地图颜色等,

  • Qt编写地图实现省市区域图的示例代码

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 省市区域图也可以叫省市轮廓图,就是将每个省份.市区的边界区域变成轮廓展示,只是个大概的轮廓,和真是的地图基本一致,毕竟都是一个个点堆起来的,可能会有很小很小的误差,之前做大屏系统中间那个中国地图的时候,客户千方百计交代清楚,千万要注意有九段线,不然在展会上被别人看到如果连九段线都没有的话会被人骂死,可能在部分早期的数据由于不是很完善所以未必有,后期的最新的地图数据都是有的,包括轮廓图数据. echart本身是没有提供

  • Qt编写地图实现闪烁点图的示例代码

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 Qt作为一个超大型的一站式GUI超市开发集成环境,不仅集成了大量的可视化UI组件,还提供了网络库.数据库操作.文件操作等类库,封装的还是相当精彩一步到位,根据个人身边的一些程序员朋友了解,自从用了Qt以来发现越来越喜欢用Qt本身的类来处理,除非一些要求很高的应用场景比如并发网络才需要去使用第三方库,不然就是直接使用Qt封装好的类,用起来非常爽,尤其是类的名称和方法的名称,几乎很自然的就能打出来. Qt除了内置了各种U

随机推荐