精华内容
下载资源
问答
  • 高德web端实现多边形电子围栏demo 地图上点三个点形成多边形区域,可以通过拉拽添加点的形式添加边的数量 可判断marker是否在多边形区域区域内(jQuery需要自己添加)
  • 高德地图定位+围栏

    2018-04-11 11:07:08
    高德地图定位+围栏.......................................................
  • 第一次用到高德地图,需要实现一个电子围栏的功能:画一个区域,统计区域内目标个数,对进出区域的目标报警。本文就第一个功能画一个区域进行了实现,是为了后续使用,目标是否在区域内,以及是都在区域边界(阈值...
    第一次用到高德地图,需要实现一个电子围栏的功能:画一个区域,统计区域内目标个数,对进出区域的目标报警。本文就第一个功能画一个区域进行了实现,是为了后续使用,目标是否在区域内,以及是都在区域边界(阈值设置)高德地图都有现成的API接口,所以不作探讨。
    

    下面直接给出绘制区域的代码:

    <!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="http://cache.amap.com/lbs/static/main1119.css"/>
        <script src="http://webapi.amap.com/maps?v=1.3&key=这里写上你的key&plugin=AMap.PolyEditor"></script>
        <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
        <script src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="container"></div>
    <div id="myPageTop">
        <table>        
            <tr>
                <td>添加新围栏:</td>
    			<td><input type="button" value="开始" onClick="startDrawPolygon();"></td>
    			<td><input type="button" value="完成" onClick="endDrawPolygon();"></td>  
            </tr>
        </table>
    </div>
    <script>
        var editorTool, map = new AMap.Map("container", {
            resizeEnable: true,
            center: [116.403322, 39.900255],//地图中心点
            zoom: 13 //地图显示的缩放级别
        });
        var beginNum = 0;
        var clickListener ;
        var beginPoints;
        var beginMarks ;
        var polygonEditor;
        var resPolygon = [];
        var resNum = 0;	
    	var Polygon;
        init();
        function init(){
            beginPoints = [];
            beginMarks = [];
            beginNum = 0;
            polygonEditor = '';
            clickListener = AMap.event.addListener(map, "click", mapOnClick);
    
            var str = '[{"J":39.91789947393269,"G":116.36744477221691,"lng":116.367445,"lat":39.917899},{"J":39.91184292800211,"G":116.40658356616223,"lng":116.406584,"lat":39.911843},{"J":39.88616249265181,"G":116.37963272998047,"lng":116.379633,"lat":39.886162}]';
            var arr = json2arr(str);
            //createPolygon(arr);
        }
        
        function mapOnClick(e) {
            // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
            beginMarks.push(addMarker(e.lnglat));
            beginPoints.push(e.lnglat);
            beginNum++;
    		//alert(beginNum);				
    		if(beginNum >= 3)
    		{	
    			//AMap.event.removeListener(clickListener);  
    			if(beginNum > 3)
    			{
    				//清除前一次的多边形
    				map.remove(Polygon);
    			}							
    			Polygon = createPolygon(beginPoints);
    			//polygonEditor = createEditor(polygon);
    			clearMarks();			
    		}
    		
        };
    
    
        function createPolygon(arr){
            var polygon = new AMap.Polygon({
                map: map,
                path: arr,
                strokeColor: "#0000ff",
                strokeOpacity: 1,
                strokeWeight: 3,
                fillColor: "#f5deb3",
                fillOpacity: 0.35
            });
            return polygon;
        }
    
    	function startDrawPolygon()
    	{
    		init();
    	}
    	
    	function endDrawPolygon()
    	{
    		AMap.event.removeListener(clickListener);
    		
    	}
    	
        function createEditor(polygon){
            var polygonEditor = new AMap.PolyEditor(map, polygon);
            polygonEditor.open();
            AMap.event.addListener(polygonEditor,'end',polygonEnd);
            return polygonEditor;
        }
    
        function closeEditPolygon(){
            polygonEditor.close();
        }
    
        function polygonEnd(res){
            resPolygon.push(res.target);
            alert(resPolygon[resNum].contains([116.386328, 39.913818]));
            appendHideHtml(resNum,res.target.getPath());
            
            resNum++;
            init();
        }
    
        function appendHideHtml(index,arr){
            var strify = JSON.stringify(arr);
            var html = '<input type="hidden" id="index'+index+'" name="paths[]" value="'+strify+'">';
            $('body').append(html);
            console.log(html);
        }
    
        
    
        function clearMarks(){
            map.remove(beginMarks);
        }
    
        function json2arr(json){
            var arr = JSON.parse(json);
            var res = [];
            for (var i = 0; i < arr.length; i++) {
                var line = [];
                line.push(arr[i].lng);
                line.push(arr[i].lat);
                res.push(line);
            };
            return res;
        }
    
    
         // 实例化点标记
        function addMarker(lnglat) {
            
            var marker = new AMap.Marker({
                icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: lnglat
            });
            marker.setMap(map);
            return marker;
        }
    
    </script>
    </body>
    </html>
    
    展开全文
  • vue中使用高德地图电子围栏

    千次阅读 2019-12-04 21:51:46
    vue中使用高德地图电子围栏 思路:根据项目的需求,给某个区域画电子围栏,且必须得在规定区域内画,所有首先得有个区域先规定好,从后台获取规定区域的坐标点,让后就是画矩形,这里主要是画矩形,在不在圈内,...

    vue中使用高德地图画电子围栏

    思路:根据项目的需求,给某个区域画电子围栏,且必须得在规定区域内画,所有首先得有个区域先规定好,从后台获取规定区域的坐标点,让后就是画矩形,这里主要是画矩形,在不在圈内,前端做校验,后端也要做检验。

    data:

          map: {},
          polygon: {},//用来画区域的
          mouseTool: {}, //画图工具
          centerArr: [], //中心点
          pathArr: [], //用来画区域的点
          drawPoint: [], //后端传过来的划默认工作区域点的坐标
    

    methods:

    //得到数据后初始化地图
        initMap() {
          this.map = new AMap.Map("container", {
            resizeEnable: true,
            center: this.centerArr,
            zoom: 20
          });
          this.polygon = new AMap.Polygon({
            map: this.map,
            fillOpacity: 0.4,
            path: this.pathArr
          });
          this.mouseTool = new AMap.MouseTool(this.map);
          this.draw();
          //监听draw事件可获取画好的覆盖物
          this.mouseTool.on("draw", e => {
          //e.obj.getPath() --这里是画出来的点
            //每次只能传四个点,所以先清空
            this.addForm.pointArr = [];
            //画出来的坐标放在存放在数组里面
            e.obj.getPath().forEach(item => {
              this.addForm.pointArr.push([String(item.lng), String(item.lat)]);
            });
          });
          this.map.setFitView();
        },
        
    //画矩形方法
        draw() {
          this.mouseTool.rectangle({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff"
            //同Polygon的Option设置
          });
        },    
        
    //关闭并清除你之前画的图像
        closeAndClear() {
          this.mouseTool.close(true);
          this.addForm.pointArr = [];
        },
    

    总结:具体的问题具体分析,画圈,划线,都是差不多类似的,只是换一个方式而已。

    遇到的问题:就是重新编辑的时候,再去渲染曾经画好的矩形,数据会被高德地图重新更改一下结构,v-model绑定的数据所有会出现你想不到的问题。所以需要你重新对数据push一遍达到你想要的数据结构。

    展开全文
  • 开始最前提到对地图覆盖物的使用,到目前为止只剩 Polygon(多边形) Circle(圆形)这两个还没有进一步说明,那么今天我们所要讲解的电子围栏功能会用到这两个覆盖物,当然也会用到Marker覆盖物 Polyline(折线...

    开始最前提到对地图覆盖物的使用,到目前为止只剩  Polygon(多边形)  Circle(圆形)这两个还没有进一步说明,那么今天我们所要讲解的电子围栏功能会用到这两个覆盖物,当然也会用到Marker覆盖物 Polyline(折线)一起来实现:

    实现思路(多边形实现):

    • 用户触发添加按钮,打开添加电子围栏模式(当然通过布尔变量来决定是否可以绘制)
    • 当用户打开电子围栏绘制是,点击第一个顶点是可以给一个参照使用Marker覆盖物做一个锚点
    • 点击第二个或锚点是移除第一个顶点的锚点,并且通过Polyline(折线)将一 二顶点连接,接下来的顶点自动连接即可
    • 当用需要保持电子围栏时,将之前的点位全部传入PolygonOptions,生成PolygonOptions对象,添加到地图
    • 需要实现是将 Polygon对象显示出来
    • 需要保存数据是,通过地图可以获取到Polygon对象,通过Polygon对象可以获取到经纬度的集合,保存即可
    • 使用时有经纬度的集合可,可以显示电子围栏也,可以根据经纬度集合判断指定的位置是否在围栏中

    看到这里可能有点懵,怎么一会儿是Polygon对象一会儿又是PolygonOptions对象,其实给地图添加覆盖物时需要的参数都是xxOptions对象,但是添加到地图时,返回的可操作对象就是xx了。之前添加Marker覆盖物添加时必须使用MarkerOptions,而返回的对象就是Marker对象。

     

    开始实现功能(代码部分使用的kotlin实现):

    高德地图:

    用户点击地图选择电子围栏范围:

    //地图上点击监听 
    aMap.setOnMapClickListener {
                /**
                 * 根据用户在地图上的点击,绘制多边形的定点
                 */
                if (iseDitMode) { //iseditMode是一个控制当用户点击添加电子围栏时该变量修改为true
                    //将位置加入集合
                    latLngs.add(it)
                    //判断是否为第一个顶点
                    if (latLngs.size > 1) {
                         /*
                          * 如果非首个顶点添加到轨迹中
                          */
                        //这里逻辑在运动轨迹文章中已经介绍
                      var  polyline =  aMap.addPolyline(PolylineOptions()
                             
                                //集合数据
                                .addAll(latLngs).width(4f).setDottedLine(false).geodesic(true)
                                //颜色
                                .color(Color.argb(255, 255, 68, 0)))
                        polylines.add(polyline)
                        //移除首个锚点
                        this.marker!!.remove()
                    } else {
                        如果是首个顶点那么先标记成锚点
                        markerOptions.position(it)
                        marker = aMap.addMarker(markerOptions);
                        trajectory(it)
                    }
                }
            }

    选择好电子围栏顶点点击保存:

    //使用本次添加的顶点生成多边形对象并存储起来 
    mPolygonOptions.add(PolygonOptions().addAll(latLngs))
     /**
      * 移除绘制过程的定点覆盖物
    */
     for (polyline in polylines) {
          polyline.remove()
    }

    显示电子围栏

    /**
         * 根据用户存储的多边形对象显示电子围栏
         * 通过aMap.addPolygon(polygonOptions)可以得到多边形对象
         * 通过polygon.contains(LatLng)可以判断出该Latlng对象是否在电子围栏中
         *
         */
        private fun showPolygonOptions() {
    
            //将存储的多边形对象取出添加到地图上
            for (polygonOptions in mPolygonOptions) {
                polygonOptions.fillColor(Color.argb(150, 239, 113, 113))
                        .strokeColor(Color.argb(150, 239, 113, 113)).strokeWidth(1f)
                var  polygon = aMap.addPolygon(polygonOptions);
                mPolygons.add(aMap.addPolygon(polygonOptions))
            }
        }

    关闭电子围栏显示:

     /**
         * 关闭显示的电子围覆盖层
         */
        private fun closAllPolygonOptions() {
    
            //循化将多个电子围栏覆盖物移除
            for (polygon in mPolygons) {
                polygon.remove()
            }
            aMap.invalidate()
        }

    到目前高德地图的设置不规则电子围栏设置步骤完成,但是代码还有待优化尤其显示和关闭,其实可以用显示和隐藏,不用每次添加和移除。百度地图的实现将使用不同的方式,这里就不给贴代码了 。

    百度地图:

    用户点击地图选择电子围栏范围:

    //用户点击地图回调
            mBaiduMap.setOnMapClickListener(object : BaiduMap.OnMapClickListener {
                override fun onMapClick(latLng: LatLng) {
    
                    /**
                     * 根据用户的点击绘制多边形的定点
                     */
                    if (iseDitMode) {
                        latLngs.add(latLng)
                        if (latLngs.size > 1) {
    
                            if (bdPolyline != null) {
                                bdPolyline!!.remove()
                            }
                            mPolylineOptions.points(latLngs).dottedLine(false).color(Color.argb(255, 255, 20, 147)).width(5)
                            bdPolyline = mBaiduMap.addOverlay(mPolylineOptions);
                            bdStartMarker1!!.remove()
                        } else if (latLngs.size > 0) {
    
                            var markerOption = MarkerOptions()
                            markerOption.position(latLng).icon(BitmapDescriptorFactory.fromResource(R.drawable.express_icon_location_centre_point))
                            bdStartMarker1 = mBaiduMap.addOverlay(markerOption)
                        }
                    }
    
                }
    
                override fun onMapPoiClick(mapPoi: MapPoi): Boolean {
                    return false
                }
            })

    用户点击保存电子围栏:

    /**
         * 根据定点生产多边形对象,及可以作为围栏对象
         * 通过com.baidu.mapapi.utils
         *                SpatialRelationUtil
         *              可以判断经纬度是否在电子围栏中
         *              isPolygonContainsPoint()可以判断对象点位是否在电子围栏中
         */
        private fun savPolygonOptions() {
            if (latLngs.size > 2) {
                //latLngs.add(latLngs.get(0))
                var latLng = arrayListOf<LatLng>()
                latLng = latLngs.clone() as ArrayList<LatLng>;
                //生成多边形对象
                var polygonOptions = PolygonOptions().points(latLngs).fillColor(Color.argb(150, 239, 113, 113))
                //设置为不可见
                polygonOptions.visible(false)
                //将多边形对象存储
                bdPolygonOptions.add(polygonOptions)
                //添加多边形到地图,并将返回的可操作对象(电子围栏)存储
                bdDrawPolylineOptionsOverlayList.add(mBaiduMap.addOverlay(polygonOptions))
                //移除添加电子围栏时的选点过程
                if (bdPolyline != null) {
                    bdPolyline!!.remove()
                }
                trajectory.setText("显示围栏")
    
            } else {
                Toast.makeText(this, "至少添加三个点才能建立围栏", Toast.LENGTH_LONG).show()
            }
        }

    显示电子围栏

    /**
         * 显示围栏对象(高德地图也可以使用该方式显示,)
         */
        private fun showPolygonOptions() {
            //将电子存储的电子围栏对象取出通过setVisible(true)方法显示出来
            for (overlay in bdDrawPolylineOptionsOverlayList) {
                overlay.setVisible(true)
            }
    
        }
    

    关闭电子围栏:

    /**
         * 隐藏围栏对象
         */
        private fun closAllPolygonOptions() {
            for (overlay in bdDrawPolylineOptionsOverlayList) {
                overlay.setVisible(false)
            }
        }
    

     

    百度地图添加电子围栏过程到这里完成了

     

    拓展:

    通过以上分别介绍了高德地图和百度地图的电子围栏实现方法,但是怎么确定某一个位置是否位于电子围栏中呢:

    高德地图通过:Polygon的contains(LatLng latLng) 方法可以知道指定的位置是否在电子围栏中不

    百度地图需要通过一个工具类:com.baidu.mapapi.utils.SpatialRelationUtil

    后两个方法可以判断指定位置是否在区域中

     

     

    总结:

    这里是通过百度地图提供的一些覆盖为去划定,区域做电子围栏添加和管理,其实还可以自定义一个画图控件覆盖在地图上,通过手动绘制区域,通过地图的Api获取屏幕位置对应的Api可以添加电子围栏,电子围栏其实就是划定的一个区域,通过两个的对不您应该发现了,百度地图和高德地图有一些Api的使用和甚至名称都相同。如果您有更好的实现过程请您分享一下。地图的使用文章更新到这里,如果有问题欢迎提问 

    项目已经上传Github项目地址点击这里

    展开全文
  • VUE调用高德地图电子围栏

    千次阅读 2020-07-10 09:26:29
    vue下使用高德JS API实现电子围栏功能

    之前用VUE实现了高德地图的历史轨迹回放热力图,现在来实现电子围栏功能。
    所谓电子围栏,就是地图上限定的区域内实现限行功能,用我们身边的事物来举例,共享单车的限行、限停区域就是电子围栏。由此可见,电子围栏最基础的做法就是在地图上实现多边形覆盖物。

    照例,第一步:加载JS AP

    • 在public/index.html中加入:
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=init"></script>
    
    • 放置地图极控制功能
      地图控制
    • 初始化地图
      初始化地图
    • 绘制多边形
      多边形
      如果需要一次绘制多个矢量图形,可以删除__this.mouseTool.close()这一行,并在“结束并保存”按钮功能里实现。

    其余函数功能的实现,参见完整代码:

    <template>
      <div>
        <div id="container"></div>
        <div class="input-card">
          <h4>电子围栏绘制</h4>
          <div class="input-item">
            <input type="button" class="btn" value="开始绘制" id="start" @click="startDrawPolygon()" />
            <input type="button" class="btn" value="清空" id="pause" @click="clearPolygon()" />
          </div>
          <div class="input-item">
            <input type="button" class="btn" value="结束并保存" id="resume" @click="stopAndSave()" />
            <input type="button" class="btn" value="重新绘制" id="stop" @click="redrawPolygon()" />
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      mounted() {
        this.$nextTick(() => {
          this.initMap();
        });
      },
      data() {
        return {
          map: null,
          mouseTool: null,
          polyType: {
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 4,
            strokeOpacity: 0.2,
            fillColor: "#1791fc",
            fillOpacity: 0.4,
            // 线样式还支持 'dashed'
            strokeStyle: "solid"
            // strokeStyle是dashed时有效
            // strokeDasharray: [30,10],
          },
          polygonList: [],
          savedPolygon: []
        };
      },
      methods: {
        initMap() {
          this.map = new AMap.Map("container", {
            resizeEnable: true,
            center: [114.459779, 38.087936],
            zoom: 16
          });
        },
        startDrawPolygon() {
          this.clearPolygon();
          let __this = this;
          this.map.plugin("AMap.MouseTool", function() {
            __this.mouseTool = new AMap.MouseTool(__this.map);
          });
          this.mouseTool.polygon(this.polyType);
          //监听draw事件可获取画好的覆盖物
          this.polygonList = [];
          this.mouseTool.on("draw", function(e) {
            __this.polygonList.push(e.obj);
            console.log("绘制的多边形", __this.polygonList);
            __this.mouseTool.close();
          });
        },
        stopAndSave() {
          // this.mouseTool.close();
          let savedPolygon = [];
          for (let i = 0; i < this.polygonList.length; i++) {
            console.log(this.polygonList[i].getOptions());
            let op = this.polygonList[i].getOptions();
            let routePath = [];
            op.path.forEach(item => {
              routePath.push([item.lng, item.lat]);
            });
            let savearr = {
              path: routePath,
              strokeColor: op.strokeColor,
              strokeOpacity: op.strokeOpacity,
              fillOpacity: op.fillOpacity,
              fillColor: op.fillColor,
              zIndex: op.zIndex
            };
            this.savedPolygon.push(savearr);
          }
          let save = JSON.stringify(this.savedPolygon);
          console.log("savedPolygon", save);
          // 模拟数据库存取
          sessionStorage.setItem("savedPolygon", save);
        },
        clearPolygon() {
          // this.map.remove(this.polygonList);
          this.polygonList = [];
          this.map.clearMap(); // 清除地图上的所有覆盖物
        },
        // 用保存的数据重新绘制多边形并添加事件
        redrawPolygon() {
          let __this = this;
          // 用浏览器模拟数据库存取
          let savedPolygon = JSON.parse(sessionStorage.getItem("savedPolygon"));
          console.log("重绘多边形数据", savedPolygon);
          if (savedPolygon == null) return;
          for (let i = 0; i < savedPolygon.length; i++) {
            var polygon = new AMap.Polygon(savedPolygon[i]);
            this.map.add(polygon);
          }
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    @import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
    #container {
      width: 100%;
      height: 500px;
    }
    
    .input-card .btn {
      margin-right: 1.2rem;
      width: 9rem;
    }
    
    .input-card .btn:last-child {
      margin-right: 0;
    }
    </style>
    

    启动项目,一切正常!

    展开全文
  • 距离测量、ip定位(浏览器定位)、行政区域查询、单击地图获取位置信息、获取marker点处位置信息、简易圆形电子围栏(圆可编辑大小、可移动位置)、右键菜单、中英对照、卫星地图 *简易电子围栏显示圆+开启路线回放+...
  • 如何在vue中使用高德地图绘制围栏

    千次阅读 2019-08-21 17:16:43
    安装vue-amap npm install vue-amap --save 在main.js中引入 vue-amap import VueAMap from ‘vue-amap’; Vue.use(VueAMap );...// 高德key key: ‘’, // 插件集合 (插件按需引入) plugin: [ “AMa...
  • 高德地图区域围栏绘制

    千次阅读 2020-07-23 09:55:00
    // 当前的坐标点集合,主要用于进行地图的可视区域的缩放 private LatLngBounds.Builder boundsBuilder = new LatLngBounds.Builder(); // 初始化地理围栏 fenceClient = new GeoFenceClient...
  • 在uniapp中使用任意一个地图绘制电子围栏(圆形和多边形)嘛,求解答,谢谢</p>
  • <template> <div class="index">...绘制多边形</el-button> <el-button type="primary" @click="editRectangle">编辑多边形</el-button> <el-button type="primary" @click="d...
  • 上次基于高德地图实现了圆形围栏功能,但限于实地使用场景,故近期重新升级到多边形电子围栏,经过反复测验及优化,目前可正常使用。 1、主要功能: 多边形围栏的CURD; 自定义变数,形状; 自动计算变数及面积...
  • 最近项目中用到电子围栏功能,于是简单了解一番,因之前的地图使用高德,故电子围栏仍使用高德,百度等其他地图类似。 该功能经过多次优化完善,基本可用。 1、主要功能: 围栏CURD; 自定义围栏半径,中心点; ...
  • 高德地图 鼠标工具绘制电子围栏 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name=...
  • vue电子地图围栏

    2019-03-01 16:43:08
    vue电子地图围栏,只包含前端代码,后台需要根据自己需要连接起来
  • 高德地图实现矩形围栏绘制和编辑

    万次阅读 热门讨论 2018-03-07 17:09:20
    需求:在地图上实现围栏绘制,并在围栏区域显示相应的数据,围栏可编辑实现:在高德地图绘制围栏绘制围栏和编辑围栏使用高德自带的插件AMap.PolyEditor,AMap.CircleEditor,AMap.MouseTool直接贴入代码如下:&...
  • 高德地图-地理围栏功能实现

    千次阅读 2019-01-12 13:54:19
    接到需求之后,我开始查看高德的相关API,由于围栏是多边形的,则需要后台提供对应的围栏的经纬度数据, 1.创建地理围栏客户端 fenceClient = new GeoFenceClient(mContext); IntentFilter filter ...
  • Android 高德地图 定位+围栏

    千次阅读 2018-04-11 11:01:25
    //绘制面 public void circle ( double v1, double v2) { LatLng latLng = new LatLng(v1, v2); aMap.addCircle( new CircleOptions().center(latLng) .radius( 300 ).strokeColor(Const.STROKE_...
  • 高德地图添加多边形围栏

    千次阅读 2018-02-11 09:21:37
    // 定义多边形的5个点点坐标 LatLng latLng1 = new LatLng(28.234259,112.879588); LatLng latLng2 = new LatLng(28.226905,112.879266); LatLng latLng3 = new LatLng(28.226735,112.883751);...
  • 基于微信小程序做的车辆电子围栏demo,实现手动点击添加删除标记点、标记点连接生成多边形区域、保存和删除已绘制的多边形区域
  • 我选择使用python的requests库来进行Post从而创建地理围栏。 import json,requests url = "https://restapi.amap.com/v4/geofence/meta?key=2336963217604035ed8fd762e356d7a7" data=json.dumps({"name":"地理围栏",...
  • 此Demo是基于百度地图V4_5_2版本的,多边形电子围栏Demo, 完美实现了以下功能 1.手动点击地图,会自动添加Marker 2.多于两个点,会自动划线 3.多于三个点会自动画出多边形区域 4.长按Marker,可以删除和修改电子围栏区域...
  • 在开发项目过程中,有许多场景需要用到定位,地图展示坐标点等多个功能,这时候就需要引入第三方地图,本文展示的是使用高德地图的示例。 引入 首先需要引入官方提供的script,需要准备事先申请的地图key值 <...
  • 本次实现的功能是地理围栏,在地图上选一个区域作为危险区域,当使用者进入到此区域中时,触发我们的围栏机制,给手机发送通知尽快离开此区域。 在实现此功能前首先了解要服务与广播,服务与广播同属于安卓的四大...
  • 需求:根据经纬度绘制标记点,点击标记点弹出弹框和底部按钮,点击顶部弹框进入二级界面,点击底部按钮弹出第三方地图软件选择页,实现跨进程跳转。 项目是公司项目,只放出重要部分代码。 绘制标记点: final ...
  • 代码地址: 前端:...原理 开发 -> Web服务 API -> 开发指南 -> API文档 -> 地理围栏 使用规则 配置好数据库 global: datasource: service: type: com.alibaba.druid.pool.DruidD
  • 构建高德地图 var map = new AMap.Map('container', { center: [121.548181, 29.806906], zoom: 15 }); 多边形展示 var path = [ [121.546266, 29.80975], [121.54543, 29.806845], [121.548713, 29.806752...
  • 数组格式是使用字符串数组List<string> 字符串格式: 圆:C:半径,经度,维度 多边形:P:经度,维度;经度,维度;经度,维度;经度,维度 大佬求帮助</p>
  • 需求:根据下拉框选择的不同,在地图绘制不同的图形并获取坐标。 注意,这个要在全局中引入amap 1,先下载amap 2,main.js中全局注册 // 地图组件 import VueAMap from 'vue-amap' Vue.use(VueAMap) VueAMap....
  • 高德地图Marker拖动圆环范围 [注:本内容来自网络,在此分享仅为帮助有需要的网友,如果侵犯了您的权利,麻烦联系我,我会第一时间删除,谢谢您。]

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 125
精华内容 50
关键字:

高德地图绘制电子围栏