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

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

使用方法


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

相关文章
|
定位技术 开发工具 开发者
为了让外卖小哥在地图里开上火箭🚀我用FLutter自定义了地图
花了五天时间,用Flutter自定义地图是什么体验?外卖小哥都开上火箭了?什么?我被女朋友赶出家门啦?欢迎观看被女友赶出家门之开火箭送外卖篇~
|
5月前
|
程序员 定位技术
程序员必知:地图坐标转换器
程序员必知:地图坐标转换器
45 0
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
312 0
|
移动开发 小程序 定位技术
小程序引入高德/百度地图坐标系详解
小程序引入高德/百度地图坐标系详解
450 0
|
前端开发 数据可视化 定位技术
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
413 0
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
|
定位技术
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
147 0
|
定位技术 API
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
547 0
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图弧线连接线标注
地图开发实战案例:高德地图弧线连接线标注
150 0
|
编解码 前端开发 定位技术
腾讯位置服务:拾取坐标的四种开发方式
腾讯位置服务:拾取坐标的四种开发方式
1315 0
|
数据可视化 JavaScript 定位技术
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
547 0