echarts地图打点makepoint添加图片

 给地图打点markPointData 的coord可以设置symbol的位置

	// var markPointData = [{
	// 	name: "自流井管理部",
	// 	coord: [104.738188, 29.383231],
	// 	symbol: 'image://images/logoG_icon.png', // 标注图片地址路径
	// 	// symbolSize: [20, 40],
	// },
	// 	{
	// 		name: "自贡市本级",
	// 		coord: [104.738188, 29.303231],
	// 		symbol: 'image://images/logoG_icon.png', // 标注图片地址路径
	// 		// symbolSize: [20, 40],
	// 	},
	// 	{
	// 	name: "贡井管理部",
	// 	coord: [
	// 		104.574372,
	// 		29.335675
	// 	],
	// 	symbol: 'image://images/logoG_icon.png', // 标注图片地址路径
	// 	// symbolSize: [20, 40],
	// }, {
	// 	name: "大安管理部",
	// 	coord: [
	// 		104.883229,
	// 		29.419936
	// 	],
	// 	symbol: 'image://images/logoG_icon.png', // 标注图片地址路径
	// 	// symbolSize: [20, 40],
	// }, {
	// 	name: "沿滩管理部",
	// 	coord: [
	// 		104.876417,
	// 		29.272521
	// 	],
	// 	symbol: 'image://images/logoG_icon.png', // 标注图片地址路径
	// 	// symbolSize: [20, 40],
	// }, {
	// 	name: "荣县管理部",
	// 	coord: [
	// 		104.403932,
	// 		29.414851
	// 	],
	// 	symbol: 'image://images/logoG_icon.png', // 标注图片地址路径
	// 	// symbolSize: [20, 40],
	// }, {
	// 	name: "富顺管理部",
	// 	coord: [
	// 		104.984256,
	// 		29.181282
	// 	],
	// 	symbol: 'image://images/logoG_icon.png', // 标注图片地址路径
	// 	// symbolSize: [20, 40],
	// }];	
 
function maps(urls,data) {
		$.get(urls, function(geoJson) {
			myChart4.hideLoading();
			echarts.registerMap('map', geoJson);
			var option4 = {
				tooltip: {
					trigger: 'item',
					formatter: '区域：{b}',
					backgroundColor: 'rgba(1, 38, 79, 1)',
					opacity:0.6,
					textStyle: {
						color: '#fffff',
						fontSize: getSize(0.17),
					},
				},
				geo: [
					{
						map: 'map', // 上面引入的数据
						show: true,
						zlevel: 0,
						roam: false, // 关闭拖拽
						label: {
							show: true,
							color: '#fff',
							fontSize: getSize(0.15),
						},
						itemStyle: {
							color: '#2ac9f9',
							borderWidth: 1, // 边框宽度
							borderColor: '#4edef8', // 边框颜色
						},
						emphasis: { // 高亮的显示设置
							label: {
								color: '#fff'
							},
							itemStyle: {
								areaColor: '#33cfd8',
								borderColor: '#fff',
								borderWidth: 3, // 标注边线线宽，单位px，默认为1
 
							},
						},
						select: { // 选中显示设置
							label: {
								color: '#fff'
							},
							itemStyle: {
								areaColor: '#9DE3FF',
								borderColor: '#fff',
								borderWidth: 3 // 标注边线线宽，单位px，默认为1
							}
						}
					},
					{
					map: 'map', // 上面引入的数据名
					zlevel: -1,
					show: true,
					roam: false, // 关闭拖拽
					label: {
						show: false,
						color: '#fff',
						fontSize: 13
					},
					itemStyle: {
						areaColor: '#29c8f9', // 地图区域的颜色(没有数据时会按照这个颜色显示)
						borderColor: '#67e9f8', // 地图区域的边框
						borderWidth: 0.6,
						shadowOffsetX: 0,
						shadowOffsetY: 15,
						shadowColor: '#7cf1f9',
					}
				}],
				series: [{
					// type: 'continuous',
					type: 'map',
					geoIndex: 0,
					label: {
						show: true,
					},
					symbolSize: 15,
					symbol: 'image://images/logoG_icon.png',
					itemStyle: {
						normal: {
							areaColor: '#29c8f9',
							shadowColor: '#7cf1f9',
							shadowBlur: 1,
							shadowOffsetX: 0,
							shadowOffsetY: 10,
						}
					},
					emphasis: { // 高亮的显示设置
						label: {
							color: '#fff'
						},
						itemStyle: {
							areaColor: '#9DE3FF',
							borderColor: '#fff',
							borderWidth: 3, // 标注边线线宽，单位px，默认为1
						}
					},
					markPoint: {
						symbolSize: [20, 40],
						data: markPointData
					},
					data: data,
				}]
			};
			myChart4.setOption(option4);
			myChart4.on('click', function (params) {
				// markPointData.forEach(function(item, index) {
				// 	if (index === params.dataIndex) {
				// 		item.symbol = "image://images/logoY_icon.png"
				// 	} else {
				// 		item.symbol = "image://images/logoG_icon.png"
				// 	}
				// })
				// myChart4.setOption(option4)
				if (typeof (params.value) != "undefined") {
					$("#areaName").val(params.name)
					$("#areaCode").val(params.value)
					refreshData()
				}
			});
 
		});
	}
 
 
	//绑定地图高亮
    function chartChange(){
	    var hourIndex = 0;
     	carouselTime = setInterval(() => {
		myChart4.dispatchAction({
			type: "downplay", //downplay 取消高亮指定的数据图形
			seriesIndex: 0
		});
		myChart4.dispatchAction({
			type: "highlight", //highLight 高亮指定的数据图形
			seriesIndex: 0, //系列index
			dataIndex: hourIndex //数据index
		});
//显示tooltip
		myChart4.dispatchAction({
			type: "showTip",
			seriesIndex: 0,
			dataIndex: hourIndex,
		});
 
		// markPointData.forEach(function(item, index) {
		// 	if (index === hourIndex) {
		// 		item.symbol = "image://images/logoY_icon.png"
		// 	} else {
		// 		item.symbol = "image://images/logoG_icon.png"
		// 	}
		// })
		// 	myChart4.setOption(option4)
		$("#areaName").val(mapdata[hourIndex].name)
		$("#areaCode").val(mapdata[hourIndex].value)
		refreshData()
		hourIndex++;
		if (hourIndex >= mapdata.length) {
			hourIndex = 0;
		}
	   }, 20000)
    }
	chartChange()复制

效果图：