高德地图js 开发三:多边形的绘制与清除,添加提示信息,判断点和图形的关系

var map;
InitMap(11, [114.312151, 30.58454]);//默认武汉中心坐标
        //地图初始化
        function InitMap(zoom, arr) {
            map = new AMap.Map('container', {
                zoom: zoom,//级别
                center: arr,//中心点坐标
                viewMode: '3D'//使用3D视图
            });
            //鼠标点击的坐标//经度getLng,纬度getLat
            map.on('click', function (e) {
                let arr = [e.lnglat.getLng(), e.lnglat.getLat()];
                
            });

            //AMap.plugin(["AMap.PolyEditor"], function () {
            //    // 实例化多边形编辑器,传入地图实例和要进行编辑的多边形实例
            //    let polygonEditor = new AMap.PolyEditor();
            //    map.addControl(polygonEditor);
            //    // 开启编辑模式
            //    //polygonEditor.open();
            //});
        }
 Polygon(arr);//开始绘制图形 arr:标记点的集合
//绘制多边形
        function Polygon(Arr) {
            let path = [];
            
            let a = "";
            for (var i = 0; i < Arr.length; i++) {
                path.push(new AMap.LngLat(Arr[i][0], Arr[i][1]))
                //a += Arr[i][0] + "," + Arr[i][1]+",";
            }
            //a = a.substring(0, a.length-1);
            polygon = new AMap.Polygon({
                path: path,
                strokeColor: "#FF33FF",
                strokeWeight: 6,
                strokeOpacity: 0.2,
                fillOpacity: 0.8,
                fillColor: '#1791fc',
                zIndex: 50,
            })
            map.add(polygon)
            // 缩放地图到合适的视野级别
            map.setFitView([polygon])

            polygons.push(polygon);//存储绘制的图形对象
            //编辑使用
            //let polyEditor = new AMap.PolyEditor(map, polygon)
            //polyEditor.open();
            //polyEditor.on('addnode', function (event) {
            //    console.log(event);
            //})

            //polyEditor.on('adjust', function (event) {
            //    console.log(event);
            //})

            //polyEditor.on('removenode', function (event) {
            //    console.log(event);
            //})

            //polyEditor.on('end', function (event) {
            //    console.log(event);
            //    // event.target 即为编辑后的多边形对象
            //})
polygon.on('click', function (e) {
                openInfo(e.lnglat, n);
                
            });
        }
//提示信息
        function openInfo(p, e) {
            //构建信息窗体中显示的内容
            var info = [];
            //info.push("<div><div><img style=\"float:left;\" src=\" http://webapi.amap.com/images/autonavi.png \"/></div> ");
            //info.push("<div style=\"padding:0px 0px 0px 4px;\"><b>高德软件</b>");
            //info.push("电话 : 010-84107000   邮编 : 100102");
            info.push("<div>" + e + "</div>");
            infoWindow = new AMap.InfoWindow({
                content: info.join("<br/>")  //使用默认信息窗体框样式,显示信息内容
            });
            console.log(map.getCenter())
            console.log(p)
            infoWindow.open(map, p);
        }

//判断裱花间是否在配送范围内 经度,纬度,多边形点集合
        function TestContain(jd, wd, Arr) {
            var myLngLat = new AMap.LngLat(jd, wd);
            let path = [];
            for (var i = 0; i < Arr.length; i++) {
                path.push(new AMap.LngLat(Arr[i][0], Arr[i][1]))
            }
            // 定义一个多边形
            let polygon1 = new AMap.Polygon({
                path: path
            });
            if (polygon1.contains(myLngLat)) {
                return true;
            } else {
                return false;
            }
        };

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值