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

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

使用方法


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

目录
打赏
0
0
0
0
32
分享
相关文章
标准坐标系与火星坐标系(高德)百度坐标系之间互转
这里先给大家介绍几个坐标系: 1.WGS84:国际坐标系,为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。2.GCJ02:火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统。
3871 0
技术好文共享:百度地图卫星二维
技术好文共享:百度地图卫星二维
69 1
心得经验总结:标准坐标系与火星坐标系(高德)百度坐标系之间互转
心得经验总结:标准坐标系与火星坐标系(高德)百度坐标系之间互转
102 1
每日一题 1765. 地图中的最高点
每日一题 1765. 地图中的最高点
程序员必知:地图坐标转换器
程序员必知:地图坐标转换器
73 0
程序技术好文:百度地图输入一个位置到另一个位置的路线
程序技术好文:百度地图输入一个位置到另一个位置的路线
48 0
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
188 0
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
742 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等