2.0 更新部分bug 增加了另一种画法，避免模糊
3.0 新增点击事件，可以点击扇区，弹窗展示内容
！高德地图画扇形不如百度画扇形，去百度吧。
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
！
$(document).ready(function(){var map = new AMap.Map('allmap', {resizeEnable: true,zoom:12,center:[116.335183,39.941735]});/** 添加Canvas图层*/var canvas = document.createElement('canvas');canvas.width = map.getSize().width;canvas.height = map.getSize().height;var context = canvas.getContext('2d');//context.strokeStyle='white';//canvas.style.zIndex = AMap.Overlay.getZIndex(this._point.lat);context.globalAlpha = 1;context.lineWidth = 2;var radious = 0;var secNumber = 1;var draw = function(argument) {context.clearRect(0,0,canvas.width,canvas.height)context.globalAlpha = (context.globalAlpha-0.3+1)%1;radious=50;var pixel = map.lnglatTocontainer(new AMap.LngLat(116.344496,39.939976));var startPoint=Math.PI/180*90; //Math.PI是3.14相当于180度，所以想转多少度就除以180乘以度数for(var i=0;i<3;i++){context.fillStyle = 'rgb(0,100,255)';context.strokeStyle = 'rgb(0,100,255)';context.beginPath();//定义起点console.log(Math.PI);console.log(Math.PI/3);context.moveTo(pixel.getX(),pixel.getY());context.arc(pixel.getX(),pixel.getY(),200,startPoint,startPoint+Math.PI/3,false);context.fill();startPoint+=Math.PI*2/3;}}var CanvasLayer = new AMap.CanvasLayer({canvas: canvas,bounds: map.getBounds( ),zooms: [3, 18],});CanvasLayer.setMap(map);draw();})
//上边用canvas画出来的 放大了会模糊，还有一个用另一种方式画的
var ORIGIN_LONGLAT = [116.335183, 39.941735];var map = new AMap.Map('allmap', {resizeEnable: true, //是否监控地图容器尺寸变化center: ORIGIN_LONGLAT,zoom: 13, //初始化地图层级});//地图加载完成map.on("complete", function () {var ORIGIN_LONGLAT2 =[116.384069,39.940796];AMap.plugin('AMap.CustomLayer', function () {var canvas = document.createElement('canvas');customLayer = new AMap.CustomLayer(canvas, {zooms: [3, 20],alwaysRender: true,//缩放过程中是否重绘，复杂绘制建议设为falsezIndex: 22,opacity:0.6});var onRender = function () {let size = map.getSize();//resizelet width = size.width;let height = size.height;canvas.style.width = width + 'px';canvas.style.height = height + 'px';canvas.width = width;canvas.height = height;//清除画布var deg = Math.PI / 180;var ctx = canvas.getContext('2d');ctx.fillStyle = '#08549a';ctx.strokeStyle = 'blue';ctx.lineWidth = 4;let pos2 = map.lngLatToContainer(ORIGIN_LONGLAT2);let pos = map.lngLatToContainer(ORIGIN_LONGLAT);//半径，这个可以根据中心点计算出例如50米外的经纬度然后传进来。let radius=Math.sqrt((pos.x-pos2.x)*(pos.x-pos2.x)+(pos.y-pos2.y)*(pos.y-pos2.y));ctx.beginPath();var p = 45; //动态设置需要旋转多少度var startPoint = 0 - Math.PI/180*120 + Math.PI/180*p;for(var i = 0; i < 3; i++){ctx.moveTo(pos.x, pos.y);ctx.arc(pos.x, pos.y, radius,startPoint ,startPoint+Math.PI / 3);ctx.lineTo(pos.x, pos.y);ctx.closePath();ctx.stroke();ctx.fill();startPoint += Math.PI * 2 / 3;}}customLayer.render = onRender;customLayer.setMap(map);customLayer.show();addClickHandler("1<br/>2<br/>3"); //传入弹窗时想要展示的内容.我这里瞎传的，根据高德的api直接写死了一个。});});// 点击事件function addClickHandler(content) {map.on("click", function (e) {//获取当前经纬度传入下边，让弹窗展示在点击的位置// 打开信息窗体var lnglat = {Q:e.lnglat.getLat(),R:e.lnglat.getLng(),lng:e.lnglat.getLng(),lat:e.lnglat.getLat()};openInfo(lnglat);});}// // 定义信息窗口样式// var opts = {//width: 240,// 信息窗口宽度//height: 140,// 信息窗口高度//title: "信息窗口", // 信息窗口标题//enableMessage: true//设置允许信息窗发送短息// };//在指定位置打开信息窗体function openInfo(lnglat) {//构建信息窗体中显示的内容var info = [];info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" /images/autonavi.png \"/></div> ");info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>");info.push("<p class='input-item'>电话 : 010-84107000 邮编 : 100102</p>");info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>");infoWindow = new AMap.InfoWindow({content: info.join("") //使用默认信息窗体框样式，显示信息内容});console.log(map.getCenter())infoWindow.open(map, lnglat);}
