echarts地图如何在对应区域添加自定义覆盖物？

Question

echarts地图如何在对应区域添加自定义覆盖物？

Only_You

21914780

发布于
2019-01-24

echarts地图如何在对应区域添加自定义覆盖物？

比如说想在每个区上都添加个定位icon及一些文字内容，该如何实现呢？

相关代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>朝阳站点布局</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" href="css/pages.css">
    <script src="lib/jquery.min.js"></script>
    <script src="lib/echarts.min.js"></script>
    <!-- 引入百度地图api文件 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IRtuipZwpSnKGqnEYqXRLdlo247Vuzzr"></script>
    <!-- <script src="js/pages.js"></script> -->
</head>

<body>
    <div class="page_title"style="background-color: #0075c7;">
        <h3 class="title">朝阳120站点布局</h3>
    </div>
    <div class="page_main site_main">
        <div class="mapContainer" id="mapContainer">

        </div>
    </div>
    <!-- 如何在对应区域添加自定义覆盖物？？？ -->
    <script>
        var dom = document.getElementById("mapContainer");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        myChart.showLoading();

        $.get('data/bj.json', function (geoJson) {

            myChart.hideLoading();

            echarts.registerMap('CY', geoJson);

            myChart.setOption(option = {
                title: {
                    text: '北京市地图',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (p / km2)'
                }, 
                visualMap: { //视觉映射组件
                    min: 800,
                    max: 50000,
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [{
                    name: '香港18区人口密度',
                    type: 'map',
                    mapType: 'CY', // 自定义扩展图表类型
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: [{
                            name: '房山区', //地图显示分区名
                            value: 20057.34 //区域填充颜色值
                        },
                        {
                            name: '门头沟区',
                            value: 15477.48
                        },
                        {
                            name: '大兴区',
                            value: 31686.1
                        },
                        {
                            name: '丰台区',
                            value: 6992.6
                        },
                        {
                            name: '石景山区',
                            value: 44045.49
                        },
                        {
                            name: '西城区',
                            value: 40689.64
                        },
                        {
                            name: '东城区',
                            value: 37659.78
                        },
                        {
                            name: '海淀区',
                            value: 45180.97
                        },
                        {
                            name: '朝阳区',
                            value: 55204.26
                        },
                        {
                            name: '昌平区',
                            value: 21900.9
                        },
                        {
                            name: '通州区',
                            value: 4918.26
                        },
                        {
                            name: '顺义区',
                            value: 5881.84
                        },
                        {
                            name: '平谷区',
                            value: 4178.01
                        },
                        {
                            name: '密云区',
                            value: 2227.92
                        },
                        {
                            name: '怀柔区',
                            value: 2180.98
                        },
                        {
                            name: '密云区',
                            value: 9172.94
                        },
                        {
                            name: '延庆区',
                            value: 3368
                        },

                    ],
                    // 自定义名称映射--英转中
                    // nameMap: {
                    //     'Central and Western': '中西区',
                    //     'Eastern': '东区',
                    //     'Islands': '离岛',
                    //     'Kowloon City': '九龙城',
                    //     'Kwai Tsing': '葵青',
                    //     'Kwun Tong': '观塘',
                    //     'North': '北区',
                    //     'Sai Kung': '西贡',
                    //     'Sha Tin': '沙田',
                    //     'Sham Shui Po': '深水埗',
                    //     'Southern': '南区',
                    //     'Tai Po': '大埔',
                    //     'Tsuen Wan': '荃湾',
                    //     'Tuen Mun': '屯门',
                    //     'Wan Chai': '湾仔',
                    //     'Wong Tai Sin': '黄大仙',
                    //     'Yau Tsim Mong': '油尖旺',
                    //     'Yuen Long': '元朗'
                    // }
                    markPoint:{ //怎么添加标记
                        symbol:'pin',
                        symbolsymbolSize:100,
                    }
                }]
            });
        });;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>

</html>