layui调用腾讯地图绘制编辑可视化范围生成json数据代码
代码语言：html
所属分类：其他
代码描述：layui调用腾讯地图绘制编辑可视化范围生成json数据代码
代码标签： layui 腾讯 地图 可视化 编辑 范围 json
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
#map {
width: 100%;
height: 100%;
}
#btns {
position: absolute;
z-index: 1001;
top: 10px;
left: 10px;
}
#manual {
position: absolute;
z-index: 1001;
top: 40px;
left: 10px;
}
#polygon {
position: absolute;
z-index: 1000;
top: 50px;
left: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="layui-btn-container" id="btns">
<button type="button" class="layui-btn layui-btn-sm" onclick="operationManual()">操作提示</button>
<button type="button" class="layui-btn layui-btn-sm" onclick="setDrawMode()">绘制模式</button>
<button type="button" class="layui-btn layui-btn-sm" onclick="setInteractMode()">编辑模式</button>
<button type="button" class="layui-btn layui-btn-sm" onclick="location.reload()">重载</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="submit()">提交选中区域数据</button>
</div>
<div id="polygon">
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="请输入纬度,经度" ondblclick="getLatLng()">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-danger" onclick="isPointInPolygon()">检测</button>
</div>
</div>
</div>
<blockquote class="layui-elem-quote layui-anim layui-anim-fadein layui-hide" id="manual">
<p><strong>绘制：</strong>鼠标左键点击及移动即可绘制图形</p>
<p><strong>结束绘制：</strong>鼠标左键双击即可结束绘制折线、多边形、圆形，多边形会自动闭合</p>
<p><strong>单选：</strong>鼠标左键点击图形</p>
<p><strong>多选：</strong>按下ctrl键后点击多个图形</p>
<p><strong>删除：</strong>选中图形后按下delete键可删除图形</p>
<p><strong>拆分：</strong>选中单个多边形后可绘制拆分线，拆分线绘制完成后自动进行拆分</p>
<p><strong>中断：</strong>绘制或编辑过程中按下esc键可中断该过程</p>
</blockquote>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
<!--注意：腾讯地图Javascript API GL需要在有Web服务的情况下才能正常使用-->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=tools,geometry"></script>
<script>
//ajax拦截并返回模拟数据
Mock.mock('/json/latlng.json', {
"code": 200,
"data": {
"overlays": [
{
"id": "",
"styleId": "",
"paths": [
{ "lng": 120.64421, "lat": 30.12952 },
{ "lng": 120.673957, "lat": 30.103461 },
{ "lng": 120.681124, "lat": 30.115062 },
{ "lng": 120.720005, "lat": 30.110608 },
{ "lng": 120.738373, "lat": 30.121596 },
{ "lng": 120.75426, "lat": 30.1213 },
{ "lng": 120.755582, "lat": 30.131247 },
{ "lng": 120.798894, "lat": 30.13102 },
{ "lng": 120.806088, "lat": 30.122305 },
{ "lng": 120.794077, "lat": 30.081572 },
{ "lng": 120.76541, "lat": 30.095534 },
{ "lng": 120.760689, "lat": 30.081349 },
{ "lng": 120.732365, "lat": 30.083333 },
{ "lng": 120.74878, "lat": 30.06175 },
{ "lng": 120.73002, "lat": 30.04134 },
{ "lng": 120.75218, "lat": 30.03421 },
{ "lng": 120.76309, "lat": 30.00618 },
{ "lng": 120.77547, "lat": 30.00393 },
{ "lng": 120.77922, "lat": 29.97111 },
{ "lng": 120.76715, "lat": 29.95787 },
{ "lng": 120.76834, "lat": 29.91275 },
{ "lng": 120.75356, "lat": 29.87912 },
{ "lng": 120.74114, "lat": 29.86978 },
{ "lng": 120.72554, "lat": 29.86634 },
{ "lng": 120.70116, "lat": 29.88319 },
{ "lng": 120.68032, "lat": 29.93662 },
{ "lng": 120.65726, "lat": 29.94594 },
{ "lng": 120.65413, "lat": 29.95851 },
{ "lng": 120.63806, "lat": 29.95534 },
{ "lng": 120.63775, "lat": 29.94738 },
{ "lng": 120.61399, "lat": 29.94429 },
{ "lng": 120.60294, "lat": 29.91815 },
{ "lng": 120.60783, "lat": 29.90015 },
{ "lng": 120.58852, "lat": 29.88397 },
{ "lng": 120.55526, "lat": 29.88219 },
{ "lng": 120.54592, "lat": 29.90227 },
{ "lng": 120.52868, "lat": 29.90279 },
{ "lng": 120.55375, "lat": 29.95541 },
{ "lng": 120.55138, "lat": 29.96638 },
{ "lng": 120.53636, "lat": 30.00097 },
{ "lng": 120.50054, "lat": 30.01796 },
{ "lng": 120.51846, "lat": 30.04309 },
{ "lng": 120.511514, "lat": 30.059936 },
{ "lng": 120.519784, "lat": 30.082292 },
{ "lng": 120.53023, "lat": 30.08385 },
{ "lng": 120.52813, "lat": 30.09933 },
{ "lng": 120.57747, "lat": 30.09974 },
{ "lng": 120.58665, "lat": 30.12602 },
{ "lng": 120.59806, "lat": 30.12833 },
{ "lng": 120.60966, "lat": 30.12014 }
]
},
{
"id": "",
"styleId": "",
"paths": [
{ "lng": 120.644013, "lat": 30.217277 },
{ "lng": 120.67172, "lat": 30.23214 },
{ "lng": 120.707092, "lat": 30.270634 },
{ "lng": 120.741397, "lat": 30.231235 },
{ "lng": 120.66701, "lat": 30.14349 },
{ "lng": 120.64421, "lat": 30.12952 },
{ "lng": 120.60966, "lat": 30.12014 },
{ "lng": 120.59806, "lat": 30.12833 },
{ "lng": 120.58665, "lat": 30.12602 },
{ "lng": 120.57747, "lat": 30.09974 },
{ "lng": 120.52813, "lat": 30.09933 },
{ "lng": 120.53023, "lat": 30.08385 },
{ "lng": 120.519784, "lat": 30.082292 },
{ "lng": 120.511514, "lat": 30.059936 },
{ "lng": 120.51846, "lat": 30.04309 },
{ "lng": 120.50054, "lat": 30.01796 },
{ "lng": 120.53636, "lat": 30.00097 },
{ "lng": 120.55138, "lat": 29.96638 },
{ "lng": 120.55375, "lat": 29.95541 },
{ "lng": 120.52868, "lat": 29.90279 },
{ "lng": 120.54592, "lat": 29.90227 },
{ "lng": 120.55526, "lat": 29.88219 },
{ "lng": 120.58852, "lat": 29.88397 },
{ "lng": 120.60783, "lat": 29.90015 },
{ "lng": 120.60294, "lat": 29.91815 },
{ "lng": 120.61399, "lat": 29.94429 },
{ "lng": 120.63775, "lat": 29.94738 },
{ "lng": 120.63806, "lat": 29.95534 },
{ "lng": 120.65413, "lat": 29.95851 },
{ "lng": 120.65726, "lat": 29.94594 },
{ "lng": 120.68032, "lat": 29.93662 },
{ "lng": 120.70116, "lat": 29.88319 },
{ "lng": 120.72554, "lat": 29.86634 },
{ "lng": 120.74114, "lat": 29.86978 },
{ "lng": 120.74368, "lat": 29.82755 },
{ "lng": 120.73557, "lat": 29.80886 },
{ "lng": 120.75066, "lat": 29.79101 },
{ "lng": 120.74557, "lat": 29.77079 },
{ "lng": 120.75182, "lat": 29.76718 },
{ "lng": 120.72204, "lat": 29.74307 },
{ "lng": 120.71693, "lat": 29.71511 },
{ "lng": 120.69906, "lat": 29.69953 },
{ "lng": 120.69118, "lat": 29.6975 },
{ "lng": 120.67332, "lat": 29.70965 },
{ "lng": 120.67518, "lat": 29.72712 },
{ "lng": 120.65753, "lat": 29.74233 },
{ "lng": 120.63258, "lat": 29.746834 },
{ "lng": 120.58334, "lat": 29.7264 },
{ "lng": 120.57174, "lat": 29.70715 },
{ "lng": 120.56183, "lat": 29.71149 },
{ "lng": 120.53223, "lat": 29.70027 },
{ "lng": 120.53902, "lat": 29.71784 },
{ "lng": 120.51393, "lat": 29.74397 },
{ "lng": 120.510404, "lat": 29.79151 },
{ "lng": 120.50245, "lat": 29.79552 },
{ "lng": 120.53717, "lat": 29.84838 },
{ "lng": 120.49639, "lat": 29.86178 },
{ "lng": 120.48818, "lat": 29.8804 },
{ "lng": 120.46172, "lat": 29.89258 },
{ "lng": 120.4495, "lat": 29.92097 },
{ "lng": 120.42729, "lat": 29.92757 },
{ "lng": 120.41226, "lat": 29.92346 },
{ "lng": 120.41528, "lat": 29.93847 },
{ "lng": 120.40374, "lat": 29.9429 },
{ "lng": 120.39395, "lat": 29.96422 },
{ "lng": 120.3643, "lat": 29.9785 },
{ "lng": 120.36285, "lat": 29.99772 },
{ "lng": 120.34524, "lat": 30.02032 },
{ "lng": 120.34291, "lat": 30.03628 },
{ "lng": 120.32465, "lat": 30.04665 },
{ "lng": 120.33805, "lat": 30.05993 },
{ "lng": 120.33369, "lat": 30.09545 },
{ "lng": 120.31334, "lat": 30.10705 },
{ "lng": 120.30081, "lat": 30.09764 },
{ "lng": 120.2919, "lat": 30.09983 },
{ "lng": 120.29784, "lat": 30.12784 },
{ "lng": 120.31419, "lat": 30.13662 },
{ "lng": 120.31906, "lat": 30.12594 },
{ "lng": 120.3274, "lat": 30.125 },
{ "lng": 120.33963, "lat": 30.14117 },
{ "lng": 120.35322, "lat": 30.14207 },
{ "lng": 120.35262, "lat": 30.15012 },
{ "lng": 120.35789, "lat": 30.14653 },
{ "lng": 120.38496, "lat": 30.15646 },
{ "lng": 120.39846, "lat": 30.13604 },
{ "lng": 120.41052, "lat": 30.13643 },
{ "lng": 120.41375, "lat": 30.14773 },
{ "lng": 120.42409, "lat": 30.14411 },
{ "lng": 120.42401, "lat": 30.13315 },
{ "lng": 120.44559, "lat": 30.13476 },
{ "lng": 120.46992, "lat": 30.17091 },
{ "lng": 120.4951, "lat": 30.17007 },
{ "lng": 120.51635, "lat": 30.15535 },
{ "lng": 120.6008, "lat": 30.14794 }
]
},
{
"id": "",
"styleId": "",
"paths": [
{ "lng": 120.26404, "lat": 29.40081 },
{ "lng": 120.27801, "lat": 29.41676 },
{ "lng": 120.28142, "lat": 29.43643 },
{ "lng": 120.26143, "lat": 29.46074 },
{ "lng": 120.27025, "lat": 29.49065 },
{ "lng": 120.20834, "lat": 29.52743 },
{ "lng": 120.20419, "lat": 29.54884 },
{ "lng": 120.18661, "lat": 29.54901 },
{ "lng": 120.17307, "lat": 29.51715 },
{ "lng": 120.11863, "lat": 29.49576 },
{ "lng": 120.07972, "lat": 29.50837 },
{ "lng": 120.08659, "lat": 29.51853 },
{ "lng": 120.07751, "lat": 29.53755 },
{ "lng": 120.05184, "lat": 29.54847 },
{ "lng": 120.0547, "lat": 29.55817 },
{ "lng": 120.03848, "lat": 29.57402 },
{ "lng": 120.02099, "lat": 29.56864 },
{ "lng": 120.00643, "lat": 29.57361 },
{ "lng": 120.01172, "lat": 29.60482 },
{ "lng": 120.04693, "lat": 29.62793 },
{ "lng": 120.02425, "lat": 29.6437 },
{ "lng": 120.03671, "lat": 29.65384 },
{ "lng": 120.03555, "lat": 29.66608 },
{ "lng": 120.02994, "lat": 29.66872 },
{ "lng": 120.02776, "lat": 29.65438 },
{ "lng": 120.015, "lat": 29.64895 },
{ "lng": 119.99109, "lat": 29.65431 },
{ "lng": 119.97312, "lat": 29.67479 },
{ "lng": 119.96837, "lat": 29.69463 },
{ "lng": 119.93779, "lat": 29.70744 },
{ "lng": 119.93015, "lat": 29.70451 },
{ "lng": 119.93119, "lat": 29.69597 },
{ "lng": 119.91881, "lat": 29.6996 },
{ "lng": 119.90016, "lat": 29.74452 },
{ "lng": 119.88908, "lat": 29.75176 },
{ "lng": 119.89054, "lat": 29.76321 },
{ "lng": 119.9272, "lat": 29.74441 },
{ "lng": 119.97.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0