echarts中国地图根据坐标在地图上标点

在这里插入图片描述

<div style="width: 35%;margin-left: -55px;position: absolute;height: 450px;" id="main"></div>

$(function () {
        $.post('[[${ctx}]]/adviertisement/AdvertisingPage/getMap', {
        }, function (result) {
            var city = [];
            var adress = "{";
            if (result.list.length > 0){
                for(var i = 0;i<result.list.length;i++){
                    var val={"name": result.list[i].city}
                    city.push(val);
                    adress += '"'+result.list[i].city+'":['+result.list[i].hotelLng+','+result.list[i].hotelLat+'],'
                }
                adress = adress.substring(0, adress.length-1);
            }
            adress += "}"

            var data = city;
            var geoCoordMap = $.parseJSON(adress) ;

            function convertData(data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };

            function randomValue() {
                return Math.round(Math.random()*1000);
            }



            option = {
                geo: {
                    map: 'china',
                    roam: true,
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(0,0,0,0.4)'
                            }
                        }
                    },
                    itemStyle: {
                        normal:{
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis:{
                            areaColor: null,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                series : [
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        symbolSize: 5,
                        symbol: '',
                        symbolRotate: 35,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#F06C00'
                            }
                        }
                    },
                    /*{
                        name: 'categoryA',
                        type: 'map',
                        geoIndex: 0,
                        // tooltip: {show: false},
                        data:[
                          /!*  {name: '北京'},
                            {name: '天津', value: randomValue()},
                            {name: '上海', value: randomValue()},
                            {name: '重庆', value: randomValue()},
                            {name: '河北', value: randomValue()},
                            {name: '河南', value: randomValue()},
                            {name: '云南', value: randomValue()},
                            {name: '辽宁', value: randomValue()},
                            {name: '黑龙江', value: randomValue()},
                            {name: '湖南', value: randomValue()},
                            {name: '安徽', value: randomValue()},
                            {name: '山东', value: randomValue()},
                            {name: '新疆', value: randomValue()},
                            {name: '江苏'},
                            {name: '浙江', value: randomValue()},
                            {name: '江西', value: randomValue()},
                            {name: '湖北', value: randomValue()},
                            {name: '广西', value: randomValue()},
                            {name: '甘肃', value: randomValue()},
                            {name: '山西', value: randomValue()},
                            {name: '内蒙古', value: randomValue()},
                            {name: '陕西', value: randomValue()},
                            {name: '吉林', value: randomValue()},
                            {name: '福建', value: randomValue()},
                            {name: '贵州', value: randomValue()},
                            {name: '广东', value: randomValue()},
                            {name: '青海', value: randomValue()},
                            {name: '西藏', value: randomValue()},
                            {name: '四川', value: randomValue()},
                            {name: '宁夏', value: randomValue()},
                            {name: '海南', value: randomValue()},
                            {name: '台湾', value: randomValue()},
                            {name: '香港', value: randomValue()},
                            {name: '澳门', value: randomValue()}*!/
                        ]
                    }*/
                ]
            };
            var chart = echarts.init(document.getElementById('main'));
            chart.setOption(option);
        })
    });

后台代码

@Log("中国地图")
    @RequestMapping("getMap")
    @ResponseBody
    public Map<String,Object> getMap(AdvertisingOrder advertisingOrder){
        Map<String,Object> map = new HashMap<>();
        advertisingOrder.setObjectId(UserUtils.getUser().getBusinessId());
        List<AdvertisingOrder> list = advertisingOrderService.selContent(advertisingOrder);    //查询获取数据
      /*  List<String> city = new ArrayList<>();
        List<String> lat = new ArrayList<>();
        List<String> lon = new ArrayList<>();
        for(int i=0;i<list.size();i++){
            if (list.get(i).getCity()!=null){
                city.add(list.get(i).getCity());
            }
            if (list.get(i).getHotelLng()!=null){
                lon.add(list.get(i).getHotelLng());
            }
            if (list.get(i).getHotelLat()!=null){
                lat.add(list.get(i).getHotelLat());
            }
        }
        map.put("city",city);
        map.put("lat",lat);*/
        map.put("list",list);
        return map;

    }
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值