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