高德地图+canvas画图结合实现的案例-创新互联

高德地图+canvas画图结合实现的案例？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

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

入了团队才发现，该项目前后端分离，后端工程师已就位主要实现接口，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                 }