最近在做共享单车的项目，项目用有用到电子围栏区域的功能，也就是相当于在地图中画一个区域，用户只能在区域内骑行，如果超出，则需要调度费
- 添加地图围栏
<div id='container' style="height: 450px;width: 100%;"></div>
<div class="input-card" style='width: 24rem;'>
<div class="input-item">
<input type="hidden" name="location_range" id="range">
<input id="clear" type="button" class="btn" value="清除当前围栏" />
</div>
</div>
script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key&plugin=AMap.MouseTool"></script>
<script>
$(function(){
//页面加载完成后显示地图
var map = new AMap.Map('container',{
zoom:13
});
var mouseTool = new AMap.MouseTool(map);
//监听draw事件可获取画好的覆盖物
var overlays = [];
mouseTool.on('draw',function(e){
overlays.push(e.obj);
//绘制完成后将数组传入表单
$('#range').val(e.obj.B.path.join(';'));
})
function draw(type){
switch(type){
case 'polygon':{
mouseTool.polygon({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Polygon的Option设置
});
break;
}
}
}
draw('polygon')
//清除绘制的标记
document.getElementById('clear').onclick = function(){
map.remove(overlays)
overlays = [];
}
})
</script>- 这样就可以得到一个字符串
117.017201,36.677666;117.034968,36.678629;117.037628,36.673948;117.036341,36.667202;117.034796,36.662313;117.026127,36.662038;117.025526,36.660317;117.012995,36.659559存入数据库即可 - 绘制完成查看
<div id="container" style="height: 400px; margin-top: 6%;"></div>
<script src="http://webapi.amap.com/maps?v=1.3&key=你申请的key&plugin=AMap.PolyEditor,AMap.CircleEditor"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script>
var editorTool, map = new AMap.Map("container", {
resizeEnable: true,
zoom: 13 //地图显示的缩放级别
});
//在地图上绘制折线
var editor={};
editor._polygon=(function(){
var arr = [
//构建多边形经纬度坐标数组，利用php循环展示经纬度坐标数组
{foreach $data as $v}
[{$v}],
{/foreach}
]
return new AMap.Polygon({
map: map,
path: arr,
strokeColor: "red",
strokeOpacity: 1,
strokeWeight: 2,
fillColor: "#f5deb3",
fillOpacity: 0.35
});
})();
map.setFitView();
</script>本文为北溟有鱼QAQ原创文章,转载无需和我联系,但请注明来自北溟有鱼QAQ https://www.umdzz.cn
