高德地图+canvas画图结合实现一个小项目-木庄网络博客

本文摘自PHP中文网，作者巴扎黑，侵删。

之前朋友委托有个创业项目，想让我帮忙，正好那段时间有点闲，半推半就中就答应下来了。

　　入了团队才发现，该项目前后端分离，后端工程师已就位主要实现接口，IOS端工程师也已就位，还差一个web前端工程师。背脊一凉，我之前虽然写过一些js和css，虽有点功底但是离前端工程师还是有距离的啊。在和朋友说明情况后，朋友也是胆大，让我试试，主要他实在找不到人了（也有可能目前前端工程师报价都太贵了，创业嘛，能节约就节约，能理解。。。），没办法，走一步算一步吧。

　　其他管理页面都还好，主要Dashboard需要在地图上根据经纬度，半径，角度等画出喷灌机的实时位置和喷灌机洒水的扇形区域。

　　由于之前没有用过高德地图，也没画过图，刚拿到这个项目的时候，真的是一脸懵逼，没办法，只能埋头研究高德地图的api，发现里面有画圆、画折线、多边形等等一些api，很快，根据高德地图提供的官方demo，很快写了如下代码：

1 //开始绑定 2 for (var m = 0; m < deviceList.length; m++) { 3 var device = deviceList[m]; 4 var point = new AMap.LngLat(device.longitude, device.latitude);// 圆心位置; 5 6 var circle = new AMap.Circle({ 7 center: point,// 圆心位置 8 radius: device.radius, //半径 9 strokeColor: "white", //线颜色10 strokeOpacity: 1, //线透明度11 strokeWeight: 1, //线粗细度12 fillColor: "#6e97ce", //填充颜色13 fillOpacity: 0.9//填充透明度14 });15 16 17 circle.setMap(map);18 19 var marker = new AMap.Marker({20 map: map,21 position: [device.longitude, device.latitude],22 });23 24 //注册点击事件25 addClickHandler(circle, device);26 27 }

View Code

　　实现了如下的图形。但是我发现画折线和扇形，地图上的api没办法很完美的实现，出来的扇形总是有点变形。跟我想要的效果还是有点距离的。