基于高德地图，标多个点，画多个区域

2024-03-28 20:28| 来源: 网络整理| 查看: 265

在这里插入图片描述

1. 渲染地图

var map = new AMap.Map("container", { resizeEnable: true, center: [109.780925,19.163534], //海南省 mapStyle:"amap://styles/whitesmoke", zoom: 9, //地图显示的缩放级别 zooms:[3,22] });

2. 在地图上获取现有的网格区域

//街镇区域的颜色 var areaColor = ["#66CCCC", "#FF9999", "#FFFF66", "#99CC66", "#FF99CC", "#CCFF00", "#CC3399", "#FF6600", "#FF9966", "#99CC33", "#666699", "#FF0033", "#FF9900", "#666633"]; function drawGrid(gridData) { for (var i = 0; i < gridData.length; i++) { var gridPath = gridData[i].gridPath; var polygon = new AMap.Polygon({ path: JSON.parse(gridPath),//设置多边形边界路径 strokeColor: "#FF33FF", //线颜色 strokeOpacity: 0.2, //线透明度 strokeWeight: 0.75, //线宽 fillColor: gridColor[i % 13], //填充色 fillOpacity: 0.75,//填充透明度 zIndex:100 });; polygon.setMap(map); } }

3. 在地图上新增网格区域

//鼠标工具，点击右键或者双击左键的时候，表示网格绘制完毕 //打印path，并打开多边形编辑器,关闭mouseTool AMap.event.addListener(mouseTool, 'draw', function (e) { //点击按钮触发多边形编辑器 var path = e.obj.getPath(); var latLngs = []; //区域边界点的坐标 for (const obj of path) { latLngs.push([obj.lng, obj.lat]); } var polygonEditor = new AMap.PolyEditor(map, e.obj); polygonEditor.open(); e.obj.on('click', function () { if (!gridTempPath){ gridInfoWindow.setContent(gridCreateForm.clone().html()); //给弹框赋值 gridInfoWindow.open(map, e.obj.getBounds().getCenter());//显示弹框 // polygonEditor.close(); 关闭 gridTempPath = JSON.stringify(latLngs); } }); mouseTool.close(); });

希望帮到正在奋斗的你，遇见更好的你。这篇文章哪里还不足的话，希望路过的大神指点指点小弟。

【本文地址】

公司简介

联系我们