前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >高德鼠标绘制覆盖物

高德鼠标绘制覆盖物

作者头像
北溟有鱼QAQ
发布2020-02-11 11:37:10
1.1K0
发布2020-02-11 11:37:10
举报
文章被收录于专栏:北溟有鱼QAQ

最近在做共享单车的项目,项目用有用到电子围栏区域的功能,也就是相当于在地图中画一个区域,用户只能在区域内骑行,如果超出,则需要调度费

  • 添加地图围栏
代码语言:javascript
复制
<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 存入数据库即可
  • 绘制完成查看
代码语言:javascript
复制
<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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/01/04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 最近在做共享单车的项目,项目用有用到电子围栏区域的功能,也就是相当于在地图中画一个区域,用户只能在区域内骑行,如果超出,则需要调度费
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档