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

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

使用方法


在桌面上新建一个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;/ 不换行 /

相关文章
|
机器学习/深度学习 存储 安全
前沿探索:声纹识别在安全与隐私保护中的应用与挑战
【10月更文挑战第16天】随着信息技术的发展,生物特征识别技术因其便捷性和安全性而受到了越来越多的关注。声纹识别作为一种非接触式的生物特征认证手段,正在被广泛应用于身份验证、安全支付等领域。本文将探讨声纹识别在实际应用中的最新进展,特别是其在安全与隐私保护方面的作用,并讨论其面临的挑战及未来的革新方向。
1147 2
|
JavaScript 定位技术 容器
Vue项目中引入地图的详细教程
Vue项目中引入地图的详细教程
343 0
|
消息中间件 JSON Java
Spring Boot、Spring Cloud与Spring Cloud Alibaba版本对应关系
Spring Boot、Spring Cloud与Spring Cloud Alibaba版本对应关系
27949 0
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
2249 0
|
网络性能优化 定位技术 C++
跨地区远程访问如何更快、更稳、更可靠:贝锐蒲公英智能选路
贝锐蒲公英云智慧组网采用自研智能选路技术,可根据实时网络状况自动选择最优路径,大幅降低延迟并提升传输速率。相较于传统单线模式下数据必须经由单一服务器转发导致高延迟与无备份线路的问题,蒲公英通过全球分布式节点与SD-WAN技术实现了智能实时导航能力。实测显示,智能选路可使通讯延迟降低5倍、传输速率提升百倍。该技术基于多云服务商的主干网络与FullMesh架构,能自动避开拥堵路径并确保网络可用性,即使面对线路故障也能自动切换,提供更快速、稳定和可靠的跨地区远程访问体验。
597 3
跨地区远程访问如何更快、更稳、更可靠:贝锐蒲公英智能选路
|
JavaScript 前端开发 API
如何在前端开发中有效管理状态:React vs. Vue
在现代前端开发中,状态管理是一个关键因素,它直接影响到应用的性能和可维护性。React 和 Vue 是当前最流行的前端框架,它们在状态管理方面各有优势和劣势。本文将深入探讨 React 和 Vue 在状态管理中的不同实现,分析它们的优缺点,并提供实际应用中的最佳实践,以帮助开发者选择最适合他们项目的解决方案。
|
弹性计算 大数据 测试技术
2024年阿里云服务器租用价格表(CPU/内存/带宽/磁盘收费标准)
2024年阿里云服务器租用价格表更新,云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、ECS u1实例2核4G、5M固定带宽、80G ESSD Entry盘优惠价格199元一年,轻量应用服务器2核2G3M带宽轻量服务器一年61元、2核4G4M带宽轻量服务器一年165元12个月、2核4G服务器30元3个月,幻兽帕鲁4核16G和8核32G服务器配置,云服务器ECS可以选择经济型e实例、通用算力u1实例、ECS计算型c7、通用型g7、c8i、g8i等企业级实例规格。阿里云百科分享阿里云服务器租用费用最新报价
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
|
存储 分布式计算 资源调度
|
移动开发 小程序 JavaScript
【开放能力解读】my.ap.openURL()能力全面开放
【开放能力解读】my.ap.openURL()能力全面开放
627 13