<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;
}