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

时间: 2013-11-21

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

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

利用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

Python实现登录接口的示例代码

之前写了Python实现登录接口的示例代码,最近需要回顾,就顺便发到随笔上了 要求: 1.输入用户名和密码 2.认证成功,显示欢迎信息 3.用户名3次输入错误后,退出程序 4.密码3次输入错误后,锁定用户名 Readme: 1.UserList.txt 是存放用户名和密码的文件,格式为:username: password,每行存放一条用户信息 2.LockList.txt 是存放已被锁定用户名的文件,默认为空 3.用户输入用户名,程序首先查询锁定名单 LockList.txt,如果用户名在里面

WinForm调用百度地图接口用法示例

本文实例讲述了WinForm调用百度地图接口用法.分享给大家供大家参考,具体如下: 1.首先用一个html文件调用百度地图接口(主要注册一个序列号): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

C#微信公众号与订阅号接口开发示例代码

本文实例讲述了C#微信公众号与订阅号接口开发示例代码.分享给大家供大家参考,具体如下: using System; using System.Web; using System.IO; using System.Text; using System.Web.Security; using weixin_api; public class wxgz_api : IHttpHandler { public void ProcessRequest(HttpContext context) { cont

vue中使用heatmapjs的示例代码(结合百度地图)

业务需求:将heatmap引入页面中,做成一个可引入的框架,使用于所有页面.代码如下. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .heatmap { width:1900px; height:1900px; } </style> <script src="js/h

使用Vue调取接口,并渲染数据的示例代码

刚接触vue.js框架的时候,很伤脑筋.今天整理一下post/get两种方式,简单的调取数据库数据,并进行渲染,希望帮助大家! 首先,在HTML页面引入: //引入vue.js文件 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 引入vue-resource.min.js文件,就可以引入接口方法了 <script src="https://cdn.st

基于游标的分页接口实现代码示例

前言 分页接口的实现,在偏业务的服务端开发中应该很常见,PC时代的各种表格,移动时代的各种feed流.timeline. 出于对流量的控制,或者用户的体验,大批量的数据都不会直接返回给客户端,而是通过分页接口,多次请求返回数据. 而最常用的分页接口定义大概是这样的: router.get('/list', async ctx => { const { page, size } = this.query // ... ctx.body = { data: [] } }) // > curl /l