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

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

使用方法


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

相关文章
|
1月前
|
机器学习/深度学习 数据采集 自然语言处理
【2023 - 探索】博0到博1,游戏新地图的探索日志
【2023 - 探索】博0到博1,游戏新地图的探索日志
43 0
|
3天前
|
JavaScript 前端开发 定位技术
程序技术好文:百度地图输入一个位置到另一个位置的路线
程序技术好文:百度地图输入一个位置到另一个位置的路线
|
3天前
|
程序员 定位技术
程序员必知:地图坐标转换器
程序员必知:地图坐标转换器
|
11月前
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
216 0
|
11月前
|
程序员 定位技术 容器
ChatGPT工作提效之使用百度地图在首都为六一儿童节献爱心(多边形覆盖物、文本标注、自动获取经纬度、爱心函数)
ChatGPT工作提效之使用百度地图在首都为六一儿童节献爱心(多边形覆盖物、文本标注、自动获取经纬度、爱心函数)
96 0
|
11月前
|
定位技术 容器
高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线
高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线
96 0
|
9月前
|
移动开发 小程序 定位技术
小程序引入高德/百度地图坐标系详解
小程序引入高德/百度地图坐标系详解
349 0
|
11月前
|
前端开发 数据可视化 定位技术
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
353 0
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
|
11月前
|
定位技术
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
97 0
|
11月前
|
定位技术 API
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
422 0