echarts地理坐标自定义地图标注

echarts地理坐标系组件（geo）用于地图的绘制，支持在地理坐标系上绘制散点图，线集。

先来张上周做的一个效果图

html代码

<div id="map" style="height:500px;width:100%;">
</div>

Js代码及echarts配置

<script type="text/javascript">

// data 配置参考echarts配置项
// https://echarts.apache.org/zh/option.html#series
var markPointData = [{
        name: "四川移动",
        coord: [
            123.97, 47.33     //坐标，通过百度地图提取
        ],
        symbol: '/img/1.png',  // 标注图片地址路径
        symbolSize: 32,
        service:'这个是自定义的字段，不是echarts的配置',
        url:'这个也是自定义的字段，不是echarts的配置'
    },{
        name: "河南电信",
        coord: [
            125.97, 47.33
        ],
        symbol: '/img/2.png',  // 标注图片地址路径
        symbolSize: 32,
        service:'自定义',
        url:'http://www.idcd.com'
    },{
        name: "北京联通",
        coord: [
            126.97, 47.33
        ],
        symbol: '/img/3.png',  // 标注图片地址路径
        symbolSize: 32,
        service:'自定义',
        url:'http://www.idcd.com'
    }
];

$.get('/maps/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('map'));
    chart.setOption({
        tooltip: { //提示框组件。
            trigger: 'item', //触发类型 散点图
            enterable: true, //鼠标是否可进入提示框
            transitionDuration: 1, //提示框移动动画过渡时间
            triggerOn : 'click',
            formatter: function(params) {
                if(params.name) {
                    var str = '<p class="conut-next">' + params.name + '</p><p class="conut-next">'+params.data.service+'</p>';
                    str += '<a target="_blank" class="layui-btn layui-btn-normal layui-btn-sm pull-right" href="'+params.data.url+'">控制</a>';
                    return str;
                }
            },
            backgroundColor: 'rgba(30, 54, 124,1)',
            borderWidth: '1px',
            borderRadius: '5',
            borderColor: 'rgba(30, 159, 255,0.5)',
            textStyle: {
                color: 'rgba(255,255,255,1)'
            },
            padding: 22
        },
        geo: {
            type: 'map',
            map: 'china',
            itemStyle: {
                areaColor : '#1E367C', 
                borderColor : '#000',
            },
            label: {
                show:true,
                color : '#fff',
            },
            emphasis: {
                itemStyle: {
                    areaColor : '#092442', 
                    borderColor : '#000',
                },
                label: {
                    show:true,
                    color : '#fff',
                }
            }
        },
        series : [
            {
                name: '节点分布',
                type: 'map',
                geoIndex: 0,
                markPoint: { //图表标注。
                    label: {
                        normal: {
                            show: true,
                        },
                        emphasis: {
                            show: true,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(72,150,128,1)'
                        }
                    },
                    data: markPointData
                }
            }
        ]
    });
});
</script>

echarts地图显示，需要地图json文件数据，这里通过ajax加载。$.get 是jquery的方法，别忘了引用jquery库。

地图json数据文件下载，包含中国地图，各省级地图数据。

百度云盘链接: https://pan.baidu.com/s/1dCfz3p756UAWKMQNj3runA 提取码: c85x