程序技术好文:高德地图经纬度坐标拾取工具

简介: 程序技术好文:高德地图经纬度坐标拾取工具

使用方法


在桌面上新建一个index.txt文件,把下面的代码复制进去保存,再把文件名改成index.html保存,双击运行打开即可


功能:


1、点击鼠标拾取坐标。


2、地图缩放。


3、拾取坐标拖动。


4、坐标点标注编辑。


5、坐标点删除。


6、定位到拾取的坐标点。


7、Excel导出坐标点。


8、街景、卫星、混合地图切换


代码如下:


<!doctype html

[/span>html

[/span>head

[/span>meta charset="utf-8"

[/span>meta http-equiv="X-UA-Compatible" content="IE=edge"

[/span>meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"

[/span>title

[/span>script type="text/javascript" src=""

[/span>script type="text/javascript" src=''


[/span>style type="text/css"

html,body{


font-size: 12px;


Width</span>: 100%;


Height</span>: 100%;


margin: 0px;


}


.map{


Height</span>: 100%;


Width</span>: 100%;


float: left;


}


/数据卡片/

//代码效果参考: http://www.lyjsj.net.cn/wx/art_23987.html


.input-card{


padding: 5px;


max-Height</span>: 360px;


Width</span>: 250px;


overflow-y: scroll;


min-Width</span>: 0;


word-wrap: break-word;


background-color: #fff;


background-clip: border-box;


border-radius: .25rem;


border-Width</span>: 0;


border-radius: 0.4rem;


box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);


position: fixed;


bottom: 1rem;


right: 1rem;


-ms-flex: 1 1 auto;


flex: 1 1 auto;


padding: 0.75rem 1.25rem;


}


/图标/


.pot-out {


background-color:#F0FFF0;


Width</span>:18px;Height</span>:18px;


//代码效果参考:http://www.lyjsj.net.cn/wx/art_23985.html

border:solid 1px #00BFFF;

border-radius:16px 16px 16px 0;


-webkit-transform:rotate(-45deg);


-moz-transform: ratate(-45deg);


transform:rotate(-45deg);


}


.pot-in {


line-Height</span>: 18px;


text-align: center;


Width</span>:18px;Height</span>:18px;


-webkit-transform:rotate(45deg);


-moz-transform: ratate(45deg);


transform:rotate(45deg);


}


/表格/


table {


text-align: center;


Width</span>:240px;


table-layout:fixed;/ 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 /


border-color: white;


border-collapse: collapse;


}


table thead tr {


background-color: #C0EEF2;


}


table tr {


background-color: #E9F8F9;


}


table td{


Width</span>:20px;


word-break:keep-all;/ 不换行 /


white-space:nowrap;/ 不换行 /

相关文章
|
开发工具 Nacos git
Git如何checkout远程tag
Git如何checkout远程tag
4402 0
|
8月前
|
监控 Java API
Spring WebFlux 响应式编程技术详解与实践指南
本文档全面介绍 Spring WebFlux 响应式编程框架的核心概念、架构设计和实际应用。作为 Spring 5 引入的革命性特性,WebFlux 提供了完全的响应式、非阻塞的 Web 开发栈,能够显著提升系统的并发处理能力和资源利用率。本文将深入探讨 Reactor 编程模型、响应式流规范、WebFlux 核心组件以及在实际项目中的最佳实践,帮助开发者构建高性能的响应式应用系统。
1242 0
|
人工智能 Java Serverless
【MCP教程系列】搭建基于 Spring AI 的 SSE 模式 MCP 服务并自定义部署至阿里云百炼
本文详细介绍了如何基于Spring AI搭建支持SSE模式的MCP服务,并成功集成至阿里云百炼大模型平台。通过四个步骤实现从零到Agent的构建,包括项目创建、工具开发、服务测试与部署。文章还提供了具体代码示例和操作截图,帮助读者快速上手。最终,将自定义SSE MCP服务集成到百炼平台,完成智能体应用的创建与测试。适合希望了解SSE实时交互及大模型集成的开发者参考。
14908 60
|
JSON 前端开发 Java
深入理解 Spring Boot 中日期时间格式化:@DateTimeFormat 与 @JsonFormat 完整实践
在 Spring Boot 开发中,处理前后端日期交互是一个常见问题。本文通过 **@DateTimeFormat** 和 **@JsonFormat** 两个注解,详细讲解了如何解析前端传来的日期字符串以及以指定格式返回日期数据。文章从实际案例出发,结合代码演示两者的使用场景与注意事项,解决解析失败、时区偏差等问题,并提供全局配置与局部注解的实践经验。帮助开发者高效应对日期时间格式化需求,提升开发效率。
3712 2
|
10月前
|
Kubernetes 监控 调度
解决在Kubernetes中DaemonSet无法在master节点调度的问题
通过以上步骤和注意事项,您能够有效解决DaemonSet不能在Kubernetes master节点上调度的问题,同时保证集群的高可用性和稳健性。
336 0
|
Java Maven 数据安全/隐私保护
如何实现Java打包程序的加密代码混淆,避免被反编译?
【10月更文挑战第15天】如何实现Java打包程序的加密代码混淆,避免被反编译?
3992 2
|
测试技术 Go C#
C#一分钟浅谈:ReSharper 插件增强开发效率
【10月更文挑战第25天】ReSharper 是 JetBrains 开发的一款 Visual Studio 插件,旨在提高 .NET 开发者的生产力。它通过代码分析、重构、导航等功能,帮助开发者避免常见错误,提升代码质量和开发效率。本文将通过具体代码案例,详细介绍 ReSharper 的常见功能及其应用。
1124 1
|
消息中间件 存储 监控
说说如何解决RocketMq消息积压?为什么Kafka性能比RocketMq高?它们区别是什么?
【10月更文挑战第8天】在分布式系统中,消息队列扮演着至关重要的角色,它不仅能够解耦系统组件,还能提供异步处理、流量削峰和消息持久化等功能。在众多的消息队列产品中,RocketMQ和Kafka无疑是其中的佼佼者。本文将围绕如何解决RocketMQ消息积压、为什么Kafka性能比RocketMQ高以及它们之间的区别进行深入探讨。
748 1
|
JavaScript 前端开发 API
如何在前端开发中有效管理状态:React vs. Vue
在现代前端开发中,状态管理是一个关键因素,它直接影响到应用的性能和可维护性。React 和 Vue 是当前最流行的前端框架,它们在状态管理方面各有优势和劣势。本文将深入探讨 React 和 Vue 在状态管理中的不同实现,分析它们的优缺点,并提供实际应用中的最佳实践,以帮助开发者选择最适合他们项目的解决方案。
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
3375 0