高德地图加饼图

实现远离，就是高德地图上加点位，点位里创建DIV，将DIV中放饼图插件，我用的是高德地图加百度echart

代码如下

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=[
              {value:335, name:'非会员数'},
              {value:310, name:'会员数'}
         ];
    pieChar = new MapPieChar({
    	id: div.id,
    	data : data
    	});
}

我自己修改的代码

 var map = new AMap.Map('map-container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        mapStyle: "amap://styles/blue",
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });

	// 添加饼图
	var divNumber=0;

	/** 添加自定义标注*/
	function addCustomMarker(lng,lat){  
		/**
		 * 自定义覆盖物dom元素  
		 */
		var div = document.createElement("div");  
		div.id = 'div'+divNumber;
		div.style.width = "100%";
		div.style.height = "150px";
		div.style.background = 'transparent';
		div.style.paddingLeft = '10px';
		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.add(marker);
		// map.getContainer().appendChild(div); //这句代码是关键,就是添加一个可引用的div,否则在echart
		// 地图上的饼图
		var ChartMapEchart = echarts.init(div); 
		var mapChartOption = {
			tooltip : {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			//去掉legend
			// legend: {
			// 	x : 'center',
			// 	y : 'bottom',
			// 	data:['rose1','rose2','rose3','rose4','rose5',],
			// 	selected:{'rose1':false,'rose2':false,'rose3':false,'rose4':false,'rose5':false,

			// 	}
			// },
			toolbox: {
				show : true,
				feature : {
					mark : {show: true},
					dataView : {show: true, readOnly: false},
					magicType : {
						show: true,
						type: ['pie', 'funnel']
					},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			calculable : true,
			series : [
				{
					name:'半径模式',
					type:'pie',
					radius : [10, 28],
					hoverAnimation:false,
					center : ['25%', '50%'],
					roseType : 'radius',
					label: {
						normal: {
							show: false
						},
						emphasis: {
							show: true
						}
					},
					lableLine: {
						normal: {
							show: false
						},
						emphasis: {
							show: true
						}
					},
					data:[
						{value:10, name:'rose1'},
						{value:5, name:'rose2'},
						{value:15, name:'rose3'},
						{value:25, name:'rose4'},
						{value:20, name:'rose5'},
					]
				}
			]
		};
		ChartMapEchart.setOption(mapChartOption);

	}
	$(document).ready(function(){
		addCustomMarker(116.4072155000,39.9047253700);
	})