基于高德地图的电子围栏、地图搜索嵌入
作者：五陵散人
- 2024-03-04 北京
本文字数：3806 字
阅读完需：约 12 分钟
前言
在系统研发中，物流、出行等场景会涉及到电子围栏、地图搜索等功能嵌入，在地图选择中可选入各厂商地图接入，这里以高德地图为例
接入步骤
1、在高德地图申请接入（个人/企业）:https://lbs.amap.com/
选择 js 接入会生成 key 和密钥，用处：
key：在请求 js 资源注入 plugin 时要用
密钥：选择使用方式，在请求高德资源时会用到
2、定义自己的页面，选择需要接入的模块
3、js 开发定义，见下例：
例子
注：html 里替换 key 和密钥即可使用
<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>下属行政区查询</title> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> <style type="text/css"> html,body,#container{ height:100%; } </style></head><body><div id="container"></div>
<div class="input-card"> <h4 style="margin-bottom: 10px; font-weight: 600">下属行政区查询</h4> <div class="input-item"> <div class="input-item-prepend"><span class="input-item-text" >省市区</span></div> <select id='province' style="width:100px" onchange='search(this)'></select> </div> <div class="input-item"> <div class="input-item-prepend"><span class="input-item-text" >地级市</span></div> <select id='city' style="width:100px" onchange='search(this)'></select> </div> <div class="input-item"> <div class="input-item-prepend"><span class="input-item-text" >区县</span></div> <select id='district' style="width:100px" onchange='search(this)'></select> </div> <div class="input-item"> <div class="input-item-prepend"><span class="input-item-text" >街道</span></div> <select id='street' style="width:100px" onchange='setCenter(this)'></select> </div> <h4 style="margin-bottom: 10px; font-weight: 600">设置围栏</h4> <button class="btn" onclick="drawPolygon()" style="margin-bottom: 5px">绘制多边形</button> <button class="btn" onclick="drawRectangle()" style="margin-bottom: 5px">绘制矩形</button> <button class="btn" onclick="drawCircle()" style="margin-bottom: 5px">绘制圆形</button></div>
<script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode: "接入申请的密钥", };</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=接入申请的key&plugin=AMap.MouseTool,AMap.DistrictSearch"></script><script type="text/javascript">
var map, district, polygons = [], citycode; var citySelect = document.getElementById('city'); var districtSelect = document.getElementById('district'); var areaSelect = document.getElementById('street');
map = new AMap.Map('container', { zoom: 12, //地图级别 center: [116.397428, 39.90923], //地图中心点 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式 viewMode: "2D", //设置地图模式 }); //行政区划查询 var opts = { subdistrict: 1, //返回下一级行政区 showbiz:false //最后一级返回街道信息 }; district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用 district.search('中国', function(status, result) { if(status=='complete'){ getData(result.districtList[0]); } }); function getData(data,level) { var bounds = data.boundaries; if (bounds) { for (var i = 0, l = bounds.length; i < l; i++) { var polygon = new AMap.Polygon({ map: map, strokeWeight: 1, strokeColor: '#0091ea', fillColor: '#80d8ff', fillOpacity: 0.2, path: bounds[i] }); polygons.push(polygon); } map.setFitView();//地图自适应 }
//清空下一级别的下拉列表 if (level === 'province') { citySelect.innerHTML = ''; districtSelect.innerHTML = ''; areaSelect.innerHTML = ''; } else if (level === 'city') { districtSelect.innerHTML = ''; areaSelect.innerHTML = ''; } else if (level === 'district') { areaSelect.innerHTML = ''; }
var subList = data.districtList; if (subList) { var contentSub = new Option('--请选择--'); var curlevel = subList[0].level; var curList = document.querySelector('#' + curlevel); curList.add(contentSub); for (var i = 0, l = subList.length; i < l; i++) { var name = subList[i].name; var levelSub = subList[i].level; var cityCode = subList[i].citycode; contentSub = new Option(name); contentSub.setAttribute("value", levelSub); contentSub.center = subList[i].center; contentSub.adcode = subList[i].adcode; curList.add(contentSub); } }
} function search(obj) { //清除地图上所有覆盖物 for (var i = 0, l = polygons.length; i < l; i++) { polygons[i].setMap(null); } var option = obj[obj.options.selectedIndex]; var keyword = option.text; //关键字 var adcode = option.adcode; district.setLevel(option.value); //行政区级别 district.setExtensions('all'); //行政区查询 //按照adcode进行查询可以保证数据返回的唯一性 district.search(adcode, function(status, result) { if(status === 'complete'){ getData(result.districtList[0],obj.id); } }); } function setCenter(obj){ map.setCenter(obj[obj.options.selectedIndex].center) }
var mouseTool = new AMap.MouseTool(map);
function drawPolyline () { mouseTool.polyline({ strokeColor: "#3366FF", strokeOpacity: 1, strokeWeight: 6, // 线样式还支持 'dashed' strokeStyle: "solid", // strokeStyle是dashed时有效 // strokeDasharray: [10, 5], }) }
function drawPolygon () { mouseTool.polygon({ strokeColor: "#FF33FF", strokeOpacity: 1, strokeWeight: 6, strokeOpacity: 0.2, fillColor: '#1791fc', fillOpacity: 0.4, // 线样式还支持 'dashed' strokeStyle: "solid", // strokeStyle是dashed时有效 // strokeDasharray: [30,10], }) }
function drawRectangle () { mouseTool.rectangle({ strokeColor:'red', strokeOpacity:0.5, strokeWeight: 6, fillColor:'blue', fillOpacity:0.5, // strokeStyle还支持 solid strokeStyle: 'solid', // strokeDasharray: [30,10], }) }
function drawCircle () { mouseTool.circle({ strokeColor: "#FF33FF", strokeOpacity: 1, strokeWeight: 6, strokeOpacity: 0.2, fillColor: '#1791fc', fillOpacity: 0.4, strokeStyle: 'solid', // 线样式还支持 'dashed' // strokeDasharray: [30,10], }) }
mouseTool.on('draw', function(event) { console.log(event); console.log(event.obj.getPath()); // event.obj 为绘制出来的覆盖物对象 })
</script><script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body></html>复制代码
划线
评论
复制
发布于: 刚刚阅读数: 4
版权声明: 本文为 InfoQ 作者【五陵散人】的原创文章。
原文链接:【http://xie.infoq.cn/article/94b322425bd291c98f4fde5ec】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
五陵散人
关注
学以解惑 2017-12-31 加入
还未添加个人简介
评论