高德地图web 端智能围栏
最近有个项目，需要在web上批量给设备设置智能围栏，设备超出范围报警，查看高德地图webJS API,web端操作案例如，后台判断没有提供源码
<!-- 重点参数：iconStyle -->
<!doctype html>
<html lang="zh-CN"> <head>
<!-- 原始地址：http://webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/positionPicker2.html -->
<base href="http://webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>自定义图标</title> <style>
html,
body {
height: %;
margin: ;
width: %;
padding: ;
overflow: hidden;
font-size: 13px;
} #pickerBox {
position: absolute;
z-index: ;
top: 50px;
right: 30px;
width: 300px;
} #pickerInput {
width: 200px;
padding: 5px 5px;
} .amap-icon:first {
display: none;
} .map {
height: %;
width: %;
float: left;
} #right {
color: #;
background-color: #f8f8f8;
width: %; height: %; position: fixed; bottom: ; right: ;
} #start,
#stop,
#right input {
margin: 4px;
margin-left: 15px;
} .title {
width: %;
background-color: #dadada
} button {
border: solid 1px;
margin-left: 15px;
background-color: #dadafa;
} .c {
font-weight: ;
padding-left: 15px;
padding-top: 4px;
} #lnglat,
#address,
#radius,
#nearestRoad,
#nearestPOI,
.title {
padding-left: 15px;
}
</style>
</head> <body>
<div id="container" class="map" tabindex=""></div>
<div id="pickerBox">
<label style="color:black;">输入关键字：</label> <input id="pickerInput" placeholder="输入关键字选取地点">
<div id="poiInfo"></div>
</div>
<div id='right'> <div>
<div class='title'>选址结果</div>
<div class='c'>经纬度:</div>
<div id='lnglat'></div>
<div class='c'>地址:</div>
<div id='address'></div>
<div class='c'>半径:</div>
<div id='radius'></div>
</div>
</div>
<script type="text/javascript" src='http://webapi.amap.com/maps?v=1.4.5&key=88fcea1f3a8906968444a696ea3b0427&plugin=AMap.ToolBar,AMap.PolyEditor,AMap.CircleEditor,AMap.PoiPicker'></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <!-- UI组件库 1.0 -->
<script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
var circle;
var editorTool, map;
var positionPicker;
var editor = {};
var radius;
AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) { var poiPicker = new PoiPicker({
input: 'pickerInput'
});
//初始化poiPicker
poiPickerReady(poiPicker);
});
AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {
map = new AMap.Map('container', {
zoom: ,
scrollWheel: true
})
positionPicker = new PositionPicker({
mode: 'dragMarker',
map: map
// map: map,
// iconStyle: { //自定义外观
// url: 'file:///C:/Users/anakin/Desktop/circle.png',
// ancher: [24, 40],
// size: [48, 48]
// }
}); positionPicker.on('success', function (positionResult) {
if (circle != null) {
radius = circle.Ch.radius;
editor._circleEditor.close();
circle.hide();
}
else {
radius = ;
} document.getElementById('lnglat').innerHTML = positionResult.position;
document.getElementById('address').innerHTML = positionResult.address;
document.getElementById('radius').innerHTML =radius+"米"; var arraycenter = positionResult.position.toString().split(",")
//在地图上绘制折线 editor._circle = (function () {
circle = new AMap.Circle({
center: arraycenter,// 圆心位置
radius: radius, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: , //线透明度
strokeWeight: , //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.35//填充透明度
});
circle.setMap(map);
return circle;
})();
editor._circleEditor = new AMap.CircleEditor(map, editor._circle); editor.startEditCircle = function () {
editor._circleEditor.open();
}
editor.closeEditCircle = function () {
editor._circleEditor.close();
}
editor._circleEditor.open(); editor._circleEditor.on('move', function (type, target, lnglat) {
console.log(lnglat);
});
// $(".amap-icon").hide(); $(".amap-icon").each(function () {
alert("dd")
});
});
positionPicker.on('fail', function (positionResult) { }); var onModeChange = function (e) {
alert(e.target.value);
positionPicker.setMode(e.target.value)
}
positionPicker.setMode("dragMap") positionPicker.start(); map.addControl(new AMap.ToolBar({
liteStyle: true
})) }); function poiPickerReady(poiPicker) { window.poiPicker = poiPicker; var marker = new AMap.Marker(); var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(, -)
}); //选取了某个POI
poiPicker.on('poiPicked', function (poiResult) { var source = poiResult.source,
poi = poiResult.item,
info = {
source: source,
id: poi.id,
name: poi.name,
location: poi.location.toString(),
address: poi.address
};
// alert(poi.location.toString());
map.panTo(poi.location); }); poiPicker.onCityReady(function () {
poiPicker.suggest('区');
});
} </script>
</body> </html>
高德地图web 端智能围栏的更多相关文章
- 高德地图web端笔记；发送http请求的工具类
1.查询所有电子围栏 package com.skjd.util; import java.io.BufferedReader; import java.io.InputStream; import ...
- 百度地图WEB端判断用户是否在网格范围内
在pc端设置商家的配送范围,用户在下单时,根据用户设置的配送地点判断是否在可配送范围内,并给用户相应的提示. 下面说下我的实现思路: 1.用百度地图在PC端设置配送范围,可拖拽选择 2.根据用户设置的 ...
- 调用高德地图web api 规划路线
实现地图输出,出发地与目的地路线,效果如下 具体代码如下 <!doctype html> <html> <head> <meta charset=" ...
- 吴裕雄 人工智能 java、javascript、HTML5、python、oracle ——智能医疗系统WEB端智能分诊代码简洁版实现
<%-- Document : getInfo Created on : 2018-10-7, 21:36:37 Author : acer --%> <%@page import= ...
- [WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程
前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...
- 高德地图api实现地址和经纬度的转换(python)
利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo ...
- android 开发 我的高德地图代码例子
下载高德地图依赖库和相关注册方式,请查看高德开发者网站:http://lbs.amap.com/api/android-sdk/summary 点击打开链接 高德地图坐标拾取器:http://lbs ...
- web端高德地图javascript API的调用
[转载https://www.cnblogs.com/zimuzimu/p/6202244.html]web端高德地图javascript API的调用 关于第三放地图的使用,腾讯.百度.高德 具体怎 ...
- 【原创】web端高德地图javascript API的调用
关于第三放地图的使用,腾讯.百度.高德 具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lb ...
随机推荐
- sass的颜色函数
sass中有些非常实用的颜色处理函数,总结如下 1.颜色加深或变浅 lighten($color,$amount) //颜色变浅 darken($color,$amount) //颜色加深 例如: l ...
- sed 用法 转https://www.cnblogs.com/Dev0ps/p/8441255.html
假设文档内容如下: [root@localhost ~]# cat /tmp/input.txt null test 要求:在1111之前添加AAA,方法如下: sed -i 's/指定的字符/要插入 ...
- Codeforces Round #532 (Div. 2)：F. Ivan and Burgers（贪心+异或基）
F. Ivan and Burgers 题目链接:https://codeforces.com/contest/1100/problem/F 题意: 给出n个数,然后有多个询问,每次回答询问所给出的区 ...
- 二叉树中和为某一值得路径 java实现
本题来自<剑指offer> 路径为从根节点到叶节点一条路径,路径经过的各节点数值之和等于某一给定数值,则打印路径上的节点 因为需要打印满足条件的路径节点信息和各节点之和,需要栈记录经过的节 ...
- # Codeforces Round #529(Div.3)个人题解
Codeforces Round #529(Div.3)个人题解 前言: 闲来无事补了前天的cf,想着最近刷题有点点怠惰,就直接一场cf一场cf的刷算了,以后的题解也都会以每场的形式写出来 A. Re ...
- Android提示框与通知的使用
1.通知 Android 3.0以前使用的方法 NotificationManager nm = (NotificationManager) getSystemService(NOTIFICATION ...
- linux查找进程id端口占用和杀死进程
linux 查找进程id端口占用和杀死进程 ps 命令用于查看当前正在运行的进程 辅助上grep 用于搜索匹配ps -ef | grep java ps ax : 显示当前系统进程的列表 ps aux ...
- Php扩展--protocolbuffers消息打包
安装/配置 编译安装 wge thttp://pecl.php.net/get/protocolbuffers-0.2.6.tgz tar -zxvfprotocolbuffers-0.2.6.tgz ...
- 【POJ】1222 EXTENDED LIGHTS OUT（高斯消元）
http://poj.org/problem?id=1222 竟然我理解了两天..... 首先先来了解异或方程组(或者说mod2方程组,modk的话貌似可以这样拓展出来) 对于一些我们需要求出的变量a ...
- 最短路之spfa系列
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2544 Problem Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t ...