高德地圖+canvas畫圖結(jié)合實(shí)現(xiàn)的案例？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

成都創(chuàng)新互聯(lián)公司主營鉛山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶App定制開發(fā),鉛山h5成都小程序開發(fā)搭建,鉛山網(wǎng)站營銷推廣歡迎鉛山等地區(qū)企業(yè)咨詢

之前朋友委托有個(gè)創(chuàng)業(yè)項(xiàng)目，想讓我?guī)兔?，正好那段時(shí)間有點(diǎn)閑，半推半就中就答應(yīng)下來了。

入了團(tuán)隊(duì)才發(fā)現(xiàn)，該項(xiàng)目前后端分離，后端工程師已就位主要實(shí)現(xiàn)接口，IOS端工程師也已就位，還差一個(gè)web前端工程師。背脊一涼，我之前雖然寫過一些js和css，雖有點(diǎn)功底但是離前端工程師還是有距離的啊。在和朋友說明情況后，朋友也是膽大，讓我試試，主要他實(shí)在找不到人了（也有可能目前前端工程師報(bào)價(jià)都太貴了，創(chuàng)業(yè)嘛，能節(jié)約就節(jié)約，能理解。。。），沒辦法，走一步算一步吧。

其他管理頁面都還好，主要Dashboard需要在地圖上根據(jù)經(jīng)緯度，半徑，角度等畫出噴灌機(jī)的實(shí)時(shí)位置和噴灌機(jī)灑水的扇形區(qū)域。

由于之前沒有用過高德地圖，也沒畫過圖，剛拿到這個(gè)項(xiàng)目的時(shí)候，真的是一臉懵逼，沒辦法，只能埋頭研究高德地圖的api，發(fā)現(xiàn)里面有畫圓、畫折線、多邊形等等一些api，很快，根據(jù)高德地圖提供的官方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, //線粗細(xì)度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                     //注冊點(diǎn)擊事件25                     addClickHandler(circle, device);26 27                 }

標(biāo)題名稱：高德地圖+canvas畫圖結(jié)合實(shí)現(xiàn)的案例-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://weahome.cn/article/hoddd.html