51 地图标注接口(一)

简介: 1. 51map 标注接口   实现在地图上标注位置、采集位置信息等操作。说的普通点就是获得地图上某个地方的经纬度和放缩比例   使用这个接口需要引入两段js:         2. 51map 标注接口效果图      该图主要显示了标注获得经纬度的结果。

1. 51map 标注接口

  实现在地图上标注位置、采集位置信息等操作。说的普通点就是获得地图上某个地方的经纬度和放缩比例

  使用这个接口需要引入两段js:

  <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>

  <script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>

 

2. 51map 标注接口效果图

  

  该图主要显示了标注获得经纬度的结果。点击上面的标注位置这个按钮,可以出现一个地图,在地图上可以标注任何一个位置的地理位置。

  使用该地图标注可以获得地图上的地理位置和地图的放缩比例。该功能主要用于采集数据。当然这个获得的经纬度数值不是单纯的经纬度,而是经纬度数字*100000 获得的。在上面一副图的文本框中可以看出。

 

3. 51map 标注用法代码说明

img_405b18b4b6584ae338e0f6ecaf736533.gif 代码
 1  < html >
 2       < head >
 3           < meta http - equiv = " Content-Type "  content = " text/html; charset=UTF-8 " >
 4           < title > Untitled Document < / title>
 5           < script language = " javascript "  src = " jquery-1[1].2.3.min.js " >< / script>
 6           < script language = " javascript "  src = " http://api.51ditu.com/js/maps.js " >< / script>
 7           < script language = " javascript "  src = " http://api.51ditu.com/js/ezmarker.js " >< / script>
 8           < script language = " JavaScript " >
 9              
10               /* *
11               * LTEZMarker : 用于显示地图标注
12               * 该操作一般用于采集地理位置经纬度
13               * 
14               * LTEvent.addListener 添加一个事件 由哪个标注值来填充数据
15               * 
16               * setDefaultView  设置默认的标注位置,一般用地理位置的拼音来
17               * 指定,如shanghai
18               * 
19               * ezmarker.setValue 也可以使用经纬度坐标来标注默认位置
20               * 
21                */
22               function  setMap(point,zoom){
23                  document.getElementById( " txtX " ).value = point.getLongitude();
24                  document.getElementById( " txtY " ).value = point.getLatitude();
25                  document.getElementById( " txtZ " ).value = zoom;
26              }
27               var  ezmarker = new  LTEZMarker( " ezmarker " );
28              ezmarker.setDefaultView( " shanghai " , 5 );
29              ezmarker.setValue( new  LTPoint( 11200000 , 4000000 ), 10 );
30              LTEvent.addListener(ezmarker, " mark " ,setMap); //
31           < / script>
32          
33       < / head>
34       < body >
35           < br / ><br / >< br / >
36          X:    < input type = " text "  id = " txtX "  value = ""   / ><br / >
37          Y:    < input type = " text "  id = " txtY "  value = ""   / ><br / >
38          Z:    < input type = " text "  id = " txtZ "  value = ""   / ><br / >
39       < / body>
40  < / html>
41 

 

 

var ezmarker=new LTEZMarker("ezmarker");

用于地图标注的类

其中setDefaultView("shanghai",5) 方法是用于设置默认标注的位置和放缩比例。方法前面的参数是城市或地址位置的拼音或者汉字,后面的是放缩比例。

如果说要默认标注某个经纬度使用 setValue(new LTPoint(11200000,4000000),10)

LTEvent.addListener(ezmarker,"mark",setMap) 是为这个标注添加一个监听事件

相关文章
|
9月前
|
人工智能 开发框架 安全
Smolagents:三行代码就能开发 AI 智能体,Hugging Face 开源轻量级 Agent 构建库
Smolagents 是 Hugging Face 推出的轻量级开源库,旨在简化智能代理的构建过程,支持多种大语言模型集成和代码执行代理功能。
654 69
Smolagents:三行代码就能开发 AI 智能体,Hugging Face 开源轻量级 Agent 构建库
|
程序员 编译器 C语言
C语言满屏飘字表白代码
C语言满屏飘字表白代码
294 0
|
人工智能 缓存 前端开发
前端已死?AI 如何重塑前端开发?
前端已死?AI 如何重塑前端开发?
408 0
|
JSON 前端开发 JavaScript
如何使用 JavaScript 扁平化 / 非扁平化嵌套 JSON 对象?
前端开发中,特别有接触过树形结构组件的项目中,这些组件很多都需要对JSON对象进行扁平化,而获取属性数据又需要对数据进行反操作。本文以代码的形式来展示如何使用 JavaScript 扁平化/非扁平化嵌套的 JSON 对象。
708 0
|
前端开发 程序员 数据处理
扁平数据转tree与tree数据扁平化
有时我们拿到的数据的数据结构可能不是理想的,那么此时就要求前端程序员,具有改造数据的能力。例如拿到扁平的数据, 但我们要应用在 tree 树形组件或 Cascader 级联选择器组件中,这样的组件要求数据结构是非扁平的的具有层级递进关系的 tree 结构。 总之就是说,提供数据的接口给到的数据,未必符合要求,而当我们又无法令他人为为我们改变时,需求和要求就来到了前端程序员这里, 所以得具备这样的数据处理能力。
436 0
|
微服务 领域建模 数据安全/隐私保护
从零打造聚合支付系统:二、建立领域模型
从零打造聚合支付系统 系列文章链接如下 从零打造聚合支付系统:一、浅谈聚合支付的核心价值从零打造聚合支付系统:二、建立领域模型从零打造聚合支付系统:三、应用微服务架构 上一篇分析了聚合支付为什么能做,本篇开始讲讲聚合支付系统怎么入手。
3864 0
|
6天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
17天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1318 7