高德地图叠加饼图

最新推荐文章于 2024-08-15 09:09:23 发布

妖艳的小学生

最新推荐文章于 2024-08-15 09:09:23 发布

阅读量2.5k

点赞数 1

分类专栏：饼图 Echarts 高德地图文章标签：高德地图叠加饼图高德地图饼图

本文链接：https://blog.csdn.net/u014052851/article/details/77449190

版权

这篇博客介绍了如何在高德地图上叠加饼图，方法与百度地图类似，主要通过在地图上添加一个div元素来实现饼图的绘制。

摘要由CSDN通过智能技术生成

和百度地图叠加饼图的方法一致,在地图上添加一个可引用的div,用于作图

代码如下

var map = new AMap.Map('container', {
	    resizeEnable: true,	//缩放控件
	    showIndoorMap:false,//隐藏地图自带的室内地图图层
	    zoom:14,
	    center: [119.218843,36.478494]
	});
var divNumber=0;
/**
 * 添加自定义标注
 */
function addCustomMarker(lng,lat){  
	/**
	 * 自定义覆盖物dom元素  
	 */
    var div = document.createElement("div");  
    div.id = 'div'+divNumber;
    div.style.width = "76px";
    div.style.height = "76px";
    divNumber++;
    
    var marker = new AMap.Marker({  
        map:map,  
        position:new AMap.LngLat(lng,lat), //基点位置  
        //offset:new AMap.Pixel(0,-40), //相对于基点的偏移位置  
        //draggable:true,  //是否可拖动  
        content:div   //自定义覆盖物内容  
    });
    map.getContainer().appendChild(div); //这句代码是关键,就是添加一个可引用的div,否则在echarts做图时会抛出找不多div节点的错误
    /**
	 * 添加饼图
	 */
    var data=[